本文主要介紹如何使用Vue來綁定操作元素的class列表和內聯樣式(style屬性).

因為class和style都是屬性,所以通過v-bind命令來處理它們:只需要通過表達式計算出結果即可,不過字符串拼接麻煩且易錯。因此,再將v-bind用於class和style屬性時,Vue.js做了專門的增強,表達式結果類型除了字符串以外還可以是對象或者數組.

1、綁定Class

可以通過v-bind:class一個對象,以動態的切換class,代碼如下:

<div id="tDiv" v-bind:class="{ active: isActive }">asdasd</div>
 

js代碼如下:

    var currentPage=new Vue({
        el:"#tDiv", //指定綁定的目標dom元素的Id
        //綁定數據源
        data: {
            isActive: true,
            hasError: false
        }
    });

Class與Style綁定