有时候class类要根据数据的不同来切换样式,可以使用v-bind绑定class,class类可以是对象,也可以是数组。
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用
v-bind
处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将v-bind
用于class
和style
时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。
有时候时间久了容易忘,这里记下之前常用的几个v-bind绑定class的用法。
- 下面的写法,可以根据 flag是 true 或 false ,来切换 span 是否启用 active 类,
<span v-bind:class="{ active: flag}"></span>
- v-bind 绑定的类,可以和原始类一起写,也可以写多个类,绑定的类 如果有 "-" 号,要用单引号包裹起来,避免歧义
<span class="btn"
v-bind:class="{ 'btn-success': success, 'btn-warning': warning }">
</span>
- v-bind也可以直接绑定一个对象,在data中修改对象的值
<span class="btn" v-bind:class="btnClass"></span>
<script>
...
data:{
btnClass:{
'btn-success': true,
'btn-warning': false
}
}
...
</script>
- v-bind绑定的也可以是一个数组
<span class="btn" v-bind:class="[success, warning]"></span>
<script>
...
data:{
success: 'btn-success',
warning: 'btn-warning'
}
...
</script>
- 数组内也可以绑定一个三元表达式,有时候需要根据一个值在两个样式之间切换的时候,比较常用,当success 为真时,就会是'btn-success'类样式,反之为'btn-warning'样式
<span class="btn" v-bind:class="[success ? 'btn-success' : 'btn-warning']"></span>
<script>
...
data:{
success: true
}
...
</script>
还有其他的一些绑定用法,这里列了几个我比较常用的,大家也可以去 Vue官网 了解更多好玩有用的知识哦~
(●'◡'●)