數據綁定一個常見需求是操作元素的 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>
js代碼
var myVue = new Vue({ el: ".test", data: { classObject:{ active:true } }, });
通過過數組將class綁定
<div class="test"> <div :class="[activeClass,error]">dsdsd</div> </div>
js代碼
var myVue = new Vue({ el: ".test", data: { activeClass:"active", error:"ddd" }, });
綁定style屬性
<div class="test"> <div :style=styleObject>dsdsd</div> </div>
js代碼
var myVue = new Vue({ el: ".test", data: { styleObject:{ color: "red", fontSize: "30px" } }, });
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。