應用介紹

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

我們可以把一個數組傳給 v-bind:class，以應用一個 class 列表：

data: {

activeClass: 'active',

errorClass: 'text-danger'

}

渲染為：

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

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

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

演示案例：

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;

}

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。