一、使用class样式:
CSS部分:
1 <style> 2 .green{ 3 color:green; 4 } 5 6 .italic{ 7 font-style:italic; 8 } 9 10 .thin{ 11 font-weight:200; 12 } 13 14 .active{ 15 /* 字符间距 */ 16 letter-spacing: 0.5em; 17 } 18 19 </style>
JS部分:
1 var app = new Vue({ 2 el: "#app",3 data() { 4 return { 5 flag:true,6 styleObj:{green:true,thin:true} 7 } 8 } 9 });
- 数组
2.数组中的三元表达式
3.数组中嵌套对象
4.直接使用对象
5.直接引用对象
二、使用内联样式
JS部分:
1 var app = new Vue({ 2 el: "#app", 3 data() { 4 return { 5 flag:true, 6 styleObj:{green:true,thin:true}, 7 cssObj:{color:‘red‘,‘font-weight‘:200}, 8 cssObj1:{‘font-style‘:‘italic‘}, 9 } 10 } 11 });
1、直接使用CSS对象
2、使用js对象
3、使用多个样式