当前位置：网站首页>v-bind用法：类动态绑定对象数组 style样式及函数方法

v-bind用法：类动态绑定对象数组 style样式及函数方法

2022-08-02 03:24:00 【yorup】

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

对象换成函数 :class='Getactive()'

2.动态绑定数组 :class="[act1,act2]"

数组换成对象 :class='getAct()'

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

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

对象语法使用函数 :style='getFont()'

数组语法（包括函数使用） :style='[baseStyle]'

4.添加点击事件@click

正常的类写法

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

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

但是这样可能会不够方便，所以有时候要动态绑定类。

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

isactive的值为true或false，当true时css样式能实现，false不能实现

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

对象换成函数 :class='Getactive()'

使得Getactive()返回和{active:isactive}一样才能实现，但函数在类里面，所以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.动态绑定数组 :class="[act1,act2]"

数组里面的变量不要加引号，加了就是字符串

		<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>

数组换成对象 :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">
			<!-- 不用动态变量 -->
			<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>

对象语法使用函数 :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>

数组语法（包括函数使用） :style='[baseStyle]'

		<div id="app">
			<!-- 不用动态变量   没有类名-->
			<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

点击事件使点击一次文字变色，再次点击恢复。在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://blog.csdn.net/m0_48639378/article/details/126011140