7. v-bind 繫結Class操作 【物件語法】
阿新 • • 發佈：2021-06-25
因為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>
，還有個陣列語法 下一篇寫