1. class基本绑定样式
class 是 HTML 属性，可以通过 v-bind 进行绑定，并且可以与class 属性共存。
<div id="app">
<!-- 1.class基本绑定样式 -->
<p v-bind:class="cls1">class基本绑定样式</p>
</div>
<!-- 此处省略 -->
<script>
var vm = new Vue({
el: '#app',
data: {
cls1: 'x'
}
});
</script>
2. 与已有class样式一起绑定，不会引起冲突
<div id="app">
<p class="a" :class="cls1">与已有class样式一起绑定，不会引起冲突</p>
</div>
<!-- 此处省略 -->
<script>
var vm = new Vue({
el: '#app',
data: {
cls1: 'x'
}
});
</script>
3. 绑定多个class样式
<div id="app">
<!-- <!-- 下面是错误写法，要注意 ,v-bind 后面书写样式表达式不能空格-> -->
<!-- <p class="a b c" :class="cls1 cls2 cls3"></p> -->
<p class="a b c" :class="cls">3.绑定多个class样式</p>
</div>
<!-- 此处省略 -->
<script>
var vm = new Vue({
el: '#app',
data: {
cls: 'q w e',
cls1: 'x',
cls2: 'y',
cls3: 'z'
}
});
</script>
4. 用户操作时样式发生变化场景使用三元表达式绑定样式
<div id="app">
<!-- 用户操作时候样式发生变化使用三元表达式 -->
<p :class="bool ? cls1 : cls2" @click = "styleChange">用户操作时候样式发生变化使用三元表达式</p>
</div>
<!-- 此处省略 -->
<script>
var vm = new Vue({
el: '#app',
data: {
bool: true,
cls1: 'x',
cls2: 'y'
},
methods:{
styleChange(){
this.bool = false
}
}
});
</script>
5. 带条件绑定多个样式，使用对象或数组绑定
<div id="app">
<!-- 绑定的对象键名是class类名，键值表示当前class显示状态 -->
<p :class="{ x: isX, y: false, z: true }">绑定对象样式</p>
<p :class="['txt-color', classB, {c: isC}]">需要绑定多个样式而且是条件绑定/p>
</div>
<!-- 此处省略 -->
<script>
var vm = new Vue({
el: '#app',
data: {
classB: 'b',
isC: true,
isX: true
}
});
</script>
