当前位置：网站首页>v-bind usage: class dynamic binding object array style style and function method

v-bind usage: class dynamic binding object array style style and function method

2022-08-02 04:00:00 【yorup】

目录

1.动态绑定对象:class='{active:isactive}'

Objects are replaced by functions :class='Getactive()'

2.Dynamically bound arrays :class="[act1,act2]"

Arrays are replaced by objects :class='getAct()'

3.动态绑定style（改变字体大小）

对象语法 :style='{fontSize:fontsize}'

Object syntax uses functions :style='getFont()'

数组语法（Including function usage） :style='[baseStyle]'

4.添加点击事件@click

Normal class notation

        <style>
			.active{
				color: red;
			}
        </style>

        <div id="app">
			<h2 class="active">一段文字</h2>
		</div>

But this might not be convenient enough,So sometimes you need to dynamically bind classes.

1.动态绑定对象:class='{active:isactive}'

isactive的值为true或false,当true时cssstyle can be achieved,false不能实现

		<div id="app">
			<h2 :class='{active:isactive}'>{
   {msg}}</h2>
		</div>
		
		<script>
			const app = new Vue({
				el: '#app',
				data(){
					return {
						isactive: true,
						msg: '一行文字'
					}
				}
			})
		</script>

Objects are replaced by functions :class='Getactive()'

使得Getactive()返回和{active:isactive}The same can be achieved,But the function is inside the class,所以Getactive()要返回{active:this.isactive}

        <div id="app">
			<h2 :class='Getactive()' @click='change'>{
   {msg}}</h2>
		</div>
		
		<script>
			const app = new Vue({
				el: '#app',
				data(){
					return {
						isactive: false,
						msg: '一行文字'
					}
				},
				methods: {
					change() {
						this.isactive = !this.isactive
					},
					Getactive(){
						return {active:this.isactive}
					}
				},
			})
			
		</script>

2.Dynamically bound arrays :class="[act1,act2]"

Variables inside the array do not use quotation marks,Added is a string

		<div id="app">
			<!-- 类名为"act1 act2" -->
			<h2 :class="['act1','act2']">学习中……</h2>
			<!-- 类名为"aaa bbb" -->
			<h2 :class="[act1,act2]">学习中……</h2>
			
		</div>
		
		<script>
			const app = new Vue({
				el: '#app',
				data(){
					return {
						act1:'aaa',
						act2:'bbb'
					}
				}
			})
		</script>

Arrays are replaced by objects :class='getAct()'

		<div id="app">
			<h2 :class="[act1,act2]">学习中……</h2>
			
			<h2 :class='getAct()'>学习中</h2>
		</div>
		
		<script>
			const app = new Vue({
				el: '#app',
				data(){
					return {
						act1:'aaa',
						act2:'bbb'
					}
				},
				methods:{
					getAct(){
						return [this.act1,this.act2]
					}
				}
			})
		</script>

3.动态绑定style（改变字体大小）

对象语法 :style='{fontSize:fontsize}'

<body>
		<div id="app">
			<!-- No dynamic variables are used -->
			<h2 :style='{fontSize:"50px"}'>123</h2>
			
			<h2 :style='{fontSize:fontsize}'>567</h2>
		</div>
		
		<script>
			const app = new Vue({
				el: '#app',
				data(){
					return {
						fontsize:50+'px'
					}
				}
			})
		</script>
	</body>

Object syntax uses functions :style='getFont()'

	<div id="app">
			<h2 :style='getFont()'>890</h2>
		</div>
		
		<script>
			const app = new Vue({
				el: '#app',
				data(){
					return {
						fontsize:50+'px'
					}
				},
				methods:{
					getFont(){
						return {fontSize:this.fontsize}
					}
				}
			})
		</script>

数组语法（Including function usage） :style='[baseStyle]'

		<div id="app">
			<!-- No dynamic variables are used   没有类名-->
			<h2 :style='["baseStyle"]'>123</h2>
			
			<h2 :style='[baseStyle]'>567</h2>
			<!-- 函数 -->
			<h2 :style='getFont()'>890</h2>
		</div>
		
		<script>
			const app = new Vue({
				el: '#app',
				data(){
					return {
						baseStyle:{background:'#f00'}
					}
				},
				methods:{
					getFont(){
						return this.baseStyle
					}
				}
			})
		</script>

4.添加点击事件@click

The click event makes the clicked text change color,再次点击恢复.在methods()里面添加函数

        <div id="app">
			<h2 :class='{active:isactive}' @click='change'>{
   {msg}}</h2>
		</div>
		
		<script>
			const app = new Vue({
				el: '#app',
				data(){
					return {
						isactive: false,
						msg: '一行文字'
					}
				},
				methods: {
					change() {
						this.isactive = !this.isactive
					}
				},
			})
			
		</script>

版权声明
本文为[yorup]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/214/202208020322054129.html

边栏推荐

猜你喜欢

随机推荐