vue.js綁定class和style樣式

資料綁定一個常見需求是操作元素的 class 清單和它的內聯樣式。因為它們都是 attribute，我們可以用 v-bind 處理它們：只需要計算表達式最終的字串。不過，字串拼接麻煩又易錯。因此，當 v-bind 用於 class 和 style 時，Vue.js 專門增強了它。表達式的結果類型除了字串之外，還可以是物件或陣列。

透過v-bind:class 或:class 來為style或class來綁定

綁定class

<div class="test">
  <div :class="{active:isActive,cc:isCc}"></div>
 </div>

js程式碼

var myVue = new Vue({
   el: ".test",
   data: {
     isActive:true,
     isCc:false
   },
 });

或下面的程式碼也可以實作

<div class="test">
   <div :class=classObject></div>
 </div>

透過過陣列將class綁定

var myVue = new Vue({
    el: ".test",
    data: {
      classObject:{
        active:true
      }
    },
  });

js程式碼

<div class="test">
  <div :class="[activeClass,error]">dsdsd</div>
</div>

程式碼綁定

有幫助，也希望大家多多支援PHP中文網。

更多vue.js綁定class和style樣式相關文章請關注PHP中文網！