参考vue.js官网 https://vuejs.bootcss.com/guide/class-and-style.html
vue使用三元表达式绑定class
数组语法和对象语法
<div :class="[{ 'red': isActive }]"></div>
<div :class="{ 'red': isActive }"></div>
<!-- isActive = true, 结果渲染为 -->
<div class="red"></div>
<div :class="[isActive ? 'red' : 'yellow', 'blue']"></div>
<div :class="[{ 'red': isActive, 'yellow': !isActive }, 'blue']"></div>
<!-- isActive = true, 结果渲染为 -->
<div class="red blue"></div>
<script>
export default {
data () {
return {
isActive: true
}
}
}
</script>
<style scoped>
.red {
color: red;
}
.yellow {
color: yellow;
}
.blue {
color: blue;
}
</style>