應(yīng)用介紹

操作元素的 class 列表和內(nèi)聯(lián)樣式是數(shù)據(jù)綁定的一個常見需求。因為它們都是屬性，所以我們可以用 v-bind 處理它們：只需要通過表達式計算出字符串結(jié)果即可。不過，字符串拼接麻煩且易錯。因此，在將 v-bind 用于 class 和 style 時，Vue.js 做了專門的增強。表達式結(jié)果的類型除了字符串之外，還可以是對象或數(shù)組。

我們可以把一個數(shù)組傳給 v-bind:class，以應(yīng)用一個 class 列表：

data: {

activeClass: 'active',

errorClass: 'text-danger'

}

渲染為：

如果你也想根據(jù)條件切換列表中的 class，可以用三元表達式：

這樣寫將始終添加 errorClass，但是只有在 isActive 是 truthy[1] 時才添加 activeClass。

不過，當(dāng)有多個條件 class 時這樣寫有些繁瑣。所以在數(shù)組語法中也可以使用對象語法：

演示案例：

Class 與 Style 綁定->綁定HTML CLASS 對象語法activeClassOneactiveClassTwoactiveClassThree

var app = new Vue({

el: '#app',

data: {

activeClass: 'active',

errorClass: 'text-danger',

isActive: true,

}

});

.static{

color: #333;

padding: 0.5rem;

margin: 0.1rem;

}

.text-danger{

color: #ff3b1d;

}

.active{

background:#f5f5f5;

}

總結(jié)

以上是生活随笔為你收集整理的vue html绑定数组,VueJs Class 与 Style 绑定 数组语法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。