站長資訊網
增加方法：1、用“:class="['類名']”語句添加；2、用“:class="['類名1','類名2',{屬性名(類名):'屬性值(true或false)}]"”語句；3、用“:class="{屬性名(類名):true}”語句；4、用“:style="{'樣式名':'樣式值'}"”語句；5、用“:style="樣式"”語句增加；6、用“:style="[data]"”語句。
本教程操作環境：windows7系統、vue3版，DELL G3電腦。
vue中的添加樣式
一、使用class樣式：
類名必須用引號 引起來；
1、數組
<h1 :class = "['類名1','類名2']">這種方法 需要用 v-bind: => : 綁定</h1>
登錄后復制
2、數組中使用三元表達式
<h1 :class = "['類名1','類名2',表達式?'類名3':'']">這種方法 需要用 v-bind: => : 綁定</h1>
登錄后復制
3、數組中嵌套對象
<h1 :class = "['類名1','類名2',{屬性名(類名):'屬性值(true或false)}]">這種方法 需要用 v-bind: => : 綁定</h1>
登錄后復制
4、直接適用對象
<h1 :class = "{屬性名(類名1):true,屬性名(類名2):true}">這種方法 需要用 v-bind: => : 綁定</h1>
登錄后復制
二、使用內聯樣式；
1、直接在元素上通過 :style 的形式
<h1 :style = "{'樣式名':'樣式值'}">這種方法 需要用 v-bind: => : 綁定</h1>
登錄后復制
2、將樣式對象，定義到data 中，在引用到 :style 中
<h1 :style = "vue里的樣式">這種方法 需要用 v-bind: => : 綁定</h1>
登錄后復制
3、在 :style 中通過數組，引用多個 data 上的樣式對象；
<h1 :style = "[data1,data2]">這種方法 需要用 v-bind: => : 綁定</h1>
登錄后復制
代碼實例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vue樣式的運用</title> <style> * { margin: 0; padding: 0; } .box { width: 150px; height: 150px; background: skyblue; line-height: 150px; text-align: center; } .border { border-radius: 50%; } .color { color: #fff; font-size: 24px; } </style> </head> <body> <div id="app"> <button @click="tagger = !tagger">切換</button> <!-- 添加樣式/切換樣式 --> <!-- 對象方式 border 數據模型 tagger 真假 真顯示 假隱藏--> <!-- <div class="box" :class="{'border':tagger}">添加style樣式</div> --> <!-- 表達式 --> <!-- <div :class="tagger ? 'border' : ''" class="box">添加style樣式</div> --> <!-- 數組 --> <div :class="tagger ? ['box','border'] : ['box']">添加style樣式</div> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> let vm = new Vue({ el: '#app', data: { tagger : true, vstyle : ['border','box'], vObj : {"border":true,"color":true,"box":true} }, methods: { } }) </script> </body> </html>
登錄后復制
（學習視頻分享：vuejs入門教程、編程基礎視頻）
