數據綁定一個常見需求是操作元素的 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" } }, });以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
