vue中的样式

一、使用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         });

数组

<h1 :class=['thin','italic']>这是一个H1标签的内容</h1>

　　2.数组中的三元表达式

<h1 :class=['thin','italic',flag?'active':'']>这是一个H1标签的内容</h1>

　　3.数组中嵌套对象

<h1 :class=['thin','italic',{'active':flag}]>这是一个H1标签的内容</h1>

　　4.直接使用对象

<h1 :class="{green:true,thin:true}">这是一个H1标签的内容</h1>

　　5.直接引用对象

<h1 :class="styleObj">这是一个H1标签的内容</h1>

二、使用内联样式

　　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对象

1 <h1 :style="{color:'red','font-weight':200}">这是一个H1标签的内容</h1>

　　2、使用js对象

1 <h1 :style="cssObj">这是一个H1标签的内容</h1>

　　3、使用多个样式

<h1 :style=[cssObj,cssObj1]>这是一个H1标签的内容</h1>

一、使用class样式：

二、使用内联样式

猜你喜欢