<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <style> .a{ width: 100px; height: 100px; } .b{ background-color: red; } </style> <body> <!-- 上面定義了兩個css樣式，第一個定義了寬高，在容器里面固定使用了a樣式，b樣式則通過點擊事件，綁定在了mood上，當點擊事件執行時，修改mood，就會動態將b樣式添加進去 這種方式只適用於樣式的類名不確定，需要動態指定，或者動態增加樣式的情況，稱之為字符串寫法 另外還可以綁定數組的寫法，先把所有的類（css）定義好，然后扔進data中定義好的一個數組中，通過代碼維護數組中的元素即可動態添加、減少樣式 數組寫法適用於要綁定的樣式、個數、名稱都不確定 第三種寫法就是對象寫法，通過定義一個對象，對象里面的屬性對應一個類（css），屬性的值是布爾類型，如果為true則表示使用這個樣式，反之不使用 --> <div id = "app"> <button class="a" :class="mood" @click="mood = 'b'">aaa</button> <button :class="moodObj" >aaa</button> </div> <script> var vm = new Vue({ el: "#app", data :{ mood: ['a','b'],//數組也可以，操作數據即可增加、減少樣式 moodObj: { a: true, b: false }//對象寫法,通過改變a、b的布爾值決定該樣式是否使用 } }) </script> </body> </html>