Vue中Class数据绑定

server/2024/10/21 10:14:26/

Class数据绑定

数据绑定的一个常见需求场景是操作CSS class列表，因为class是attribute（属性），我们可以和其他attribute一样使用v-bind 将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且容易出错的。因此，Vue 专门为class 的v-bind 用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是数组或对象。

绑定对象Object

<template>
<h3>class数据绑定</h3>
<hr>
<div :class="{active:isActive,'text-danger':hasError}">isActive</div>
<button @click="exchage">切换</button></template>
<script>export default {
data(){return{isActive:true,hasError:true}
},
methods:{exchage(){this.isActive=!this.isActive}
}
}</script>
<style scoped>
.active{color:red;
}
</style>

运行结果
未切换前：
在这里插入图片描述
切换后：

多个对象绑定

<template>
<h3>class数据绑定</h3>
<hr>
<div :class="classObject">isActive</div>
<button @click="exchage">切换</button></template>
<script>export default {
data(){return{classObject:{active:true,'text-danger':true}}
},
methods:{exchage(){this.classObject.active = !this.classObject.active}
}
}</script>
<style scoped>
.active{color:rgb(132, 0, 255);font-size: large;
}
</style>

运行结果：
切换前：
在这里插入图片描述
切换后：

数组绑定

<template><h3>class数据绑定</h3><hr><div :class="[activeClass,errorClass]">isActive</div></template><script>export default {data(){return{activeClass: 'active',errorClass:'text-danger'}},}</script><style scoped>.active{color:red;}</style>

运行结果：
在这里插入图片描述
如果你想在数组中渲染某个class,你可以使用三元表达式。

<template><h3>class数据绑定</h3><hr><div :class="[isActive ? 'active' : '']">isActive</div><button @click="exchage">切换</button></template><script>export default {data(){return{isActive:true,}},methods:{exchage(){this.isActive=!this.isActive}}}</script><style scoped>.active{color:red;}</style>

运行结果：
在这里插入图片描述
切换：

数组和对象

<template><h3>class数据绑定</h3><hr><div :class="[{'active':isActive},errorClass]">isActive</div><button @click="exchage">切换</button></template><script>export default {data(){return{isActive:true,errorClass:"text-danger"}},methods:{exchage(){this.isActive=!this.isActive}}}</script><style scoped>.active{color:red;}</style>