因?yàn)関-bind可以直接實(shí)現(xiàn) 標(biāo)簽屬性的值動(dòng)態(tài)化，那么Class作為一個(gè)屬性，那么：
?
<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>
?
如果我這樣寫(xiě)的話 你可能會(huì)罵我 畫(huà)蛇添足 多此一舉 *****? s*****b*****當(dāng)然 這是對(duì)的，但是他有一種另外形式來(lái)展現(xiàn)：
就是 Class屬性? + v-bind 可以用 對(duì)象語(yǔ)法來(lái)寫(xiě)，對(duì)象語(yǔ)法 當(dāng)然是一個(gè){} ,里面是 鍵 - 值 ，值是boolean型的? 如果是 true 的才會(huì)把值添加進(jìn)去。
例：
<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 完全可以用變量代替 ，那么進(jìn)階的寫(xiě)法就應(yīng)該這樣寫(xiě) 【我們配個(gè)方法 然后實(shí)現(xiàn) 點(diǎn)擊按鈕變紅色 再次點(diǎn)擊變藍(lán)色】：
<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>
?
所以 非常的方便啊，
?
還有一個(gè)特點(diǎn)：
如果你有多個(gè)Class 其中有一個(gè)是v-bind綁定的 那么它們兩個(gè)Class會(huì)合并起來(lái) 并不會(huì)吧 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>
?
?
還有就是 如果你覺(jué)得 直接寫(xiě)對(duì)象語(yǔ)法太長(zhǎng)的話? 你就直接定義一個(gè)方法，然后寫(xiě)進(jìn)去即可，v-bind也會(huì)自動(dòng)解析這個(gè)函數(shù)的? ，函數(shù)中直接寫(xiě) return {xxxx:teue,xxxx:false} 即可??
例：
<style>
????????.red{
????????????color:red;
????????}
????????.blue{
????????????color:?blue;
????????}
????</style>
</head>
<body>
<script?src="js/vue.js"></script>
????<div?id="app">
<!--???記得加括號(hào)?因?yàn)檫@是調(diào)用函數(shù)?不是事件調(diào)用的.?????-->
????????<h2?:class="classs()">不忘初心?，?方得始終?。</h2>
????</div>
<script?>
????const?app?=?new?Vue({
????????el:"#app",
????????data:{
????????????red:"red"
????????},
????????methods:{
????????????classs:function?(){
????????????????return?{red:true,blue:false};
????????????}
????????}
????})
</script>
?
?
?
，還有個(gè)數(shù)組語(yǔ)法 下一篇寫(xiě)
?
作者：??咸瑜???
APP 