Vue中的样式

第一种:class的绑定
<style>
    .red{
      color:red
    }
    .thin{
      font-weight:200;
    }
    .italic{
      font-style: inherit;
    }
    .active{
      letter-spacing: 0.5em;  
    }
  </style>

<div id="app">

     <p :class="['thin','italic','red']">class样式第一种绑定</p>

    <p :class="['thin','italic',flag?'red':'']">class样式第二种绑定 三目运算符</P>

     <p :class="['thin','italic',{'red':flag}]">class样式第三种，以对象的形式绑定</p>

<p :class="classObject">class样式第四种</p>
     
 </div>


var vm=new Vue({

  el:"#app",
  data:{

    msg:"欢迎光临",
    flag:false,
    classObject:{red:true,thin:true,active:false}
  },
  methods:{
    
  }
})

第二种style样式绑定

<div id="app">

     <p :style="{color:'red','font-size':'40px'}">style第一种样式</p>

     <p :style="styleObje1">style第二种样式</p>

     <p :style="[styleObje1,styleObje2]">style第三种样式</p>




var vm=new Vue({

  el:"#app",
  data:{

    msg:"欢迎光临",
    styleObje1:{"color":"red","font-size":"600px"},
    styleObje2:{"font-weight":"200"}
    
  },
  methods:{
    
  }
})


    
    </div>