一、使用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、使用多个样式
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。