1. 要使用的类，直接放在标签中
style.css
span{
display: inline-block;
padding: 20px;
background: chartreuse;
border: 1px solid #ccc;
font-size: 20px;
text-align: center;
line-height: auto;
}
.colorClass{
background: red;
}
.lengthClass::after{
content: "Vue";
}
app.js
new Vue({
el: "#app-test",
data: {
//这里设置是否使用colorClass、textClass类
changeColor: true,
changeText: false
}
})
index.html
<body>
<div id="app-test">
<!-- 使用v-bind绑定class属性，使用类似JSON的形式来设置类 -->
<span v-bind:class="{colorClass:changeColor,textClass:changeText}">
Hello
</span>
<!-- @click设置点击改变是否使用类 -->
<button @click="changeColor = !changeColor">变色</button>
<button @click="changeText = !changeText">加字</button>
</div>
</body>
效果图：这种方法可能会比较耗费性能,如果用的比较多还是放在计算属性中
动态绑定CSS.gif
2.通过计算属性方式
app.js
new Vue({
el: "#app-test",
data: {
//这里设置是否使用colorClass、textClass类
changeColor: true,
changeText: false
},
computed: {
classChange() {
//这里注意要使用this
return { colorClass: this.changeColor, textClass: this.changeText }
}
}
})
css
和第一个一样
index.html
<body>
<div id="app-test">
<!-- 使用v-bind绑定class属性，使用类似JSON的形式来设置类 -->
<span v-bind:class="classChange">
Hello
</span>
<!-- @click设置点击改变是否使用类 -->
<button @click="changeColor = !changeColor">变色</button>
<button @click="changeText = !changeText">加字</button>
</div>
</body>
