我們可以通關用v-bind來繫結class或者id來控制css樣式

1、繫結單個class來匹配css

// css部分
.fcss{ color:red }


<div v-bind:class="first">         </div>
解釋一下就是繫結一個class為vue例項裡的資料first，first的值為fcss,所以最終綁定了一個叫fcss的class屬性上去


// 構造器部分
var vm = new Vue({
  el:繫結的DOM,
  data:{
    first:'fcss'
  }
})

2、物件語法，用來控制css的切換

// css部分
.fcss{ color:red }
.scss{ color:blue }


<div v-bind:class="{fcss:boolean,scss:bool}">         </div>
語法結構是v-bind:class="{class的名字:繫結的資料}"
通關繫結資料的布林值來控制這個css是否顯示,boolean為true，所以會顯示
如果為flase，則不會繫結上去，這裡只有fcss為true，而scss為false，所以只綁定了fcss這個class


// 構造器部分
var vm = new Vue({
  el:繫結的DOM,
  data:{
    boolean:true,
    bool:false
  }
})
 

3、陣列語法，一下子繫結複數個css

// css部分
.fcss{ color:red }
.scss{ color:blue }
.tcss{ color:green }


<div v-bind:class="[fclass,sclass]">         </div>
和單獨繫結一個css的語法一樣，不過用陣列是複數繫結而已


// 構造器部分
var vm = new Vue({
  el:繫結的DOM,
  data:{
    fclass:'fcss',
    sclass:'scss'
  }
})