應(yīng)用介紹

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

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

data: {

activeClass: 'active',

errorClass: 'text-danger'

}

渲染為：

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

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

不過，當(dāng)有多個(gè)條件 class 時(shí)這樣寫有些繁瑣。所以在數(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)容還不錯(cuò)，歡迎將生活随笔推薦給好友。