vue學習(八) vue中樣式 class 定義引用

//style
<style>
　　.red{
　　　　color:red;
　　}
　　.thin{//字體粗細
　　　　font-weight:200
　　}
　　.italic{//字體傾斜
　　　　font-style:italic
　　}
　　.active{//字符間距
　　　　letter-spacing: 0.5em
　　}
</style>
//html
<div id="app">
　　//傳統方式
　　<h1 class="red thin" >紅紅火火</>
　　//使用v-bind綁定 要注意 必須用數組方式，並且每個class都必須被單引號包着
　　//並且支持三目運算符
　　<h1 :class="['thin','red',flag?'active':''s]">紅紅火火恍恍惚惚</h1>
　　//這種方式也可以  如果flag為false的話 class就沒有active
　　<h1 :class="['thin','red',{'active':true}]"></h1> 
　　//在位class使用v-bind綁定對象的時候，對象的屬性是類名 ，對象屬性可帶引號可不帶引號 屬性值是一個標識符
　　<h1 :class="{ red:true, thin:true, italic:false, active:false }"></h1>
　　//這樣也可以
　　<h1 ：class="classObj"> </h1>
</div>

//script
<script>
　　var vm = new Vue({
　　　　el:'app',
　　　　data:{
　　　　　　msg: '點擊一下'，
　　　　　　flag: true,
　　　　　　classObj:{ red:true, thin:true, italic:false, active:false}
　　　　},
　　　　methods:{//methods中定義了當前vue實例中所有可用的方法
　　　　　
　　　　}
　　})
</script>