1. :class="['class1','class2','class3']"放到数组中并且加引号
<p :class="['size', 'color', 'active']">我是段落</p>
2. 编写一个三目运算符来实现按需绑定
格式: 条件表达式 ? '需要绑定的类名' : ''
<p :class="['size', 'color', flag ? 'active' : '']">我是段落</p>
3. 通过对象来决定是否需要绑定
格式: {'需要绑定的类名' : 是否绑定}
<p :class="['size', 'color',{'active' : false}]">我是段落</p>
4. 使用Model中的对象来替换数组
<p :class="obj">我是段落</p>
<script>
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
data: {
obj:{
'size': false,
'color': false,
'active': true,
}
}
});
</script>
网友评论