Vue使用樣式和內聯樣式
阿新 • • 發佈：2018-12-11
注意：
1.Vue中使用樣式，必須用v-on（縮寫成:）繫結
2.在Js中，物件（無序鍵值對）的類名單引號可以省略，但是屬性名中帶有連字元等其他特殊字元要用引號隔開，推薦全部都用引號，屬性名（鍵值）必須使用單引號隔開。所以都用單引號不會出錯。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../lib/vue.js"></script> <style> .color{ color:cornflowerblue; } .thin{ font-weight: 200; } .italic{ font-style: italic; /*義大利斜塔*/ } .active{ letter-spacing: 0.5em; /*設定中文字串間距，英文的可用word-spacing*/ } </style> </head> <body> <div id="app"> <h3 class="color italic">陳小帥真的是有點帥的啊</h3> <!--HTML的使用方式--> <h3 :class="['color','thin']">陳小帥真的是有點帥的啊</h3> <!--vue的使用方式，傳遞一個數組，一定要用單引號隔開。同時需要使用v-on繫結--> <h3 :class="['color','thin',flag?'active':'']">陳小帥真的是有點帥的啊</h3> <!--vue第二種使用方式，陣列中使用三元表示式--> <h3 :class="['color','thin',{'active':flag}]">陳小帥真的是有點帥的啊</h3> <!--vue第三種使用方式，陣列中使用物件替代三元表示式，通過鍵名作為判斷的依據--> <h3 :class="{'active':false,'color':flag,'italic':!flag}">陳小帥真的是有點帥的啊</h3> <!--vue第四種用法，直接使用物件，v-on指令繫結的屬性是類名，可以帶引號也可省略，通過一個鍵作為識別符號--> </div> <!--以上是在Vue中使用樣式--> <div id="app2"> <h3 :style="{color:'lightblue','font-weight':200}">陳小帥是真的長得有點帥的啊</h3> <!--這裡的物件都是無序鍵值對的集合，如果屬性名中帶有連字元等其他特殊字元要用引號隔開，推薦全部都用引號--> <!--通過style直接書寫樣式--> <h3 :style="styleObj">陳小帥是真的長得有點帥的啊</h3> <!--將物件放入data中，然後定義--> <h3 :style="[styleObj1,styleObj2]">陳小帥是真的長得有點帥的啊</h3> <!--多個data物件--> <!--以上內聯樣式--> </div> <script> var vm = new Vue({ el:'#app', data:{ flag:true }, methods:{} }); var vm2 = new Vue({ el:'#app2', data:{ styleObj1:{color:'lightblue','font-weight':200}, styleObj2:{'font-style': 'italic'} }, methods:{} }); </script> </body> </html>
效果：
