完整源碼
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../js/vue.js"></script>
</head>
<body><div id="root"> <!--class字符串寫法--><div class="basic" :class="str">你好</div><br><br><!--class數組寫法--><div class="basic" :class="classArr">你好</div><br><br><input type="button" @click="bigFont" value='字體變大'></button><br><br><!--class對象寫法--><div class="basic" :class="classObj">你好</div><br><br><input type="button" @click="backgroundColor" value='背景變色'></button><br><br><!--style對象寫法,數組寫法比較少這里不介紹--><div class="basic" :style="styleObj">你好</div><br><br><input type="button" @click="changeFontSize" :value='isSmall?"字體變大":"字體變小"' /></div>
</body><script>const vm = new Vue({el:'#root',data() {return {str:'smallFont',classArr:[],classObj:{backgroundColor:false //false表示不使用該class},styleObj:{fontSize : ''},isSmall:false}},methods: {bigFont(){this.classArr.push('bigFont')},backgroundColor(e){this.classObj.backgroundColor = !this.classObj.backgroundColorthis.classObj.backgroundColor?e.target.value = '恢復原色':e.target.value = '背景變色'},changeFontSize(){this.isSmall = !this.isSmallif(this.isSmall) this.styleObj.fontSize = '15px'else this.styleObj.fontSize = '30px'}}})</script><style>.basic{font-size: 30px;color: red;}.smallFont{font-size: 15px;}.bigFont{font-size: 50px;}.backgroundColor{background-color: aqua;}</style>
</html>
代碼解析
1. 動態綁定 class 的三種方式
（1）字符串寫法
<div class="basic" :class="str">你好</div>
- 特點：通過字符串指定類名，適用于類名不確定的場景
- 原理：
str的值為smallFont，初始時會在basic類基礎上添加smallFont類
（2）數組寫法
<div class="basic" :class="classArr">你好</div>
<input type="button" @click="bigFont" value='字體變大'>
- 特點：通過數組存儲多個類名，適用于需要動態添加類名的場景
- 原理：點擊按鈕時，調用
bigFont方法向classArr數組中添加bigFont類
（3）對象寫法
<div class="basic" :class="classObj">你好</div>
<input type="button" @click="backgroundColor" value='背景變色'>
- 特點：通過對象的鍵值對（鍵為類名，值為布爾值）控制類是否生效，適用于樣式切換場景
- 原理：點擊按鈕時切換
classObj.backgroundColor的值（true/false），控制backgroundColor類是否生效
2. 動態綁定 style 的方式
<div class="basic" :style="styleObj">你好</div>
<input type="button" @click="changeFontSize" :value='isSmall?"字體變大":"字體變小"' />
- 特點：通過對象直接綁定行內樣式，適用于需要動態設置具體樣式值的場景
- 原理：點擊按鈕時切換
isSmall的值，根據其值設置styleObj.fontSize的具體大小
3. 小結
:class和:style是 Vue 的指令，用于動態綁定樣式- 靜態類（如
basic）和動態類可以同時存在 - 樣式切換的核心是通過修改數據（data 中的屬性）來驅動視圖變化
- class 綁定適用于預定義的 CSS 類，style 綁定適用于需要動態計算的樣式值
