因为v-bind可以直接实现 标签属性的值动态化，那么Class作为一个属性，那么：
<style>
.active{
color:red;
}
</style>
<script src="js/vue.js"></script>
<div id="app">
<h2 :class="active">不忘初心 ， 方得始终 。</h2>
</div>
<script >
const app = new Vue({
el:"#app",
data:{
active:"active"
}
})
</script>
如果我这样写的话 你可能会骂我 画蛇添足 多此一举 ***** s*****b*****当然 这是对的，但是他有一种另外形式来展现：
就是 Class属性 + v-bind 可以用 对象语法来写，对象语法 当然是一个{} ,里面是 键 - 值 ，值是boolean型的 如果是 true 的才会把值添加进去。
例：
<style>
.red{
color:red;
}
.blue{
color: blue;
}
</style>
</head>
<body>
<script src="js/vue.js"></script>
<div id="app">
<!-- <h2 class="blue">不忘初心 ， 方得始终 。</h2> -->
<h2 :class="{red:false,blue:true}">不忘初心 ， 方得始终 。</h2>
</div>
<script >
const app = new Vue({
el:"#app",
data:{
red:"red",
blue:"blue",
}
})
</script>
上面的true 和 false 完全可以用变量代替 ，那么进阶的写法就应该这样写 【我们配个方法 然后实现 点击按钮变红色 再次点击变蓝色】：
<style>
.red{
color:red;
}
.blue{
color: blue;
}
</style>
<script src="js/vue.js"></script>
<div id="app">
<!-- <h2 class="blue">不忘初心 ， 方得始终 。</h2> -->
<h2 :class="{red:boolean,blue:!boolean}">不忘初心 ， 方得始终 。</h2>
<button @click="not">切换颜色</button>
</div>
<script >
const app = new Vue({
el:"#app",
data:{
red:"red",
blue:"blue",
boolean:true
},
methods:{
not:function (){
this.boolean = !this.boolean;
}
}
})
</script>
所以 非常的方便啊，
还有一个特点：
如果你有多个Class 其中有一个是v-bind绑定的 那么它们两个Class会合并起来 并不会吧 v-bind绑定的class 覆盖掉,例如：
<script src="js/vue.js"></script>
<div id="app">
<!-- <h2 class="h2 red">不忘初心 ， 方得始终 。</h2>-->
<h2 class="h2" :class="red">不忘初心 ， 方得始终 。</h2>
</div>
<script >
const app = new Vue({
el:"#app",
data:{
red:"red"
}
})
</script>
还有就是 如果你觉得 直接写对象语法太长的话 你就直接定义一个方法，然后写进去即可，v-bind也会自动解析这个函数的 ，函数中直接写 return {xxxx:teue,xxxx:false} 即可
例：
<style>
.red{
color:red;
}
.blue{
color: blue;
}
</style>
</head>
<body>
<script src="js/vue.js"></script>
<div id="app">
<!-- 记得加括号 因为这是调用函数 不是事件调用的. -->
<h2 :class="classs()">不忘初心 ， 方得始终 。</h2>
</div>
<script >
const app = new Vue({
el:"#app",
data:{
red:"red"
},
methods:{
classs:function (){
return {red:true,blue:false};
}
}
})
</script>
，还有个数组语法 下一篇写
作者：咸瑜
开通会员