vue中class绑定的语法格式
对象绑定
:class="{ 'class名': 表达式|布尔值 }"
<div :class="{'action':this.static}"></div>
<script>
export default {
data() {
return {
static: true
};
},
};
</script>
运行结果:<div :class="action"></div>
数组绑定
(1) :class="['class名1', 'class名2', '...']"
<div :class="['action','static']"></div>
运行结果:<div :class="action static"></div>
(2) :class="['class名1', { 'class名': 表达式|布尔值 }]"
<div :class="['action',{'static':this.static}]"></div>
<script>
export default {
data() {
return {
static: true
};
},
};
</script>
运行结果:<div :class="action static"></div>
(3) :class="['class名1', 表达式 ? 'class名' : '']"
<div :class="['action',this.static==='vue'?'stcor':'']"></div>
<script>
export default {
data() {
return {
static: 'vue'
};
},
};
</script>
这里运用的是三元运算符
运行结果:<div :class="action stcor"></div>