vue中的样式

一、使用class样式：

CSS部分：　

     <style>
         .green{
             color:green;
         }

         .italic{
             font-style:italic;
         }

         .thin{
             font-weight:;
         }

         .active{
             /* 字符间距 */
             letter-spacing: 0.5em;
         }

     </style>

　　JS部分：

     var app = new Vue({
             el: "#app",
             data() {
                 return {
                     flag:true,
                     styleObj:{green:true,thin:true}
                 }
             }
         });

1. 数组　　

<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部分：

     var app = new Vue({
             el: "#app",
             data() {
                 return {
                     flag:true,
                     styleObj:{green:true,thin:true},
                     cssObj:{color:'red','font-weight':200},
                     cssObj1:{'font-style':'italic'},
                 }
             }
         });

　　1、直接使用CSS对象

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

　　2、使用js对象

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

　　3、使用多个样式

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