在 Vue 中,綁定樣式分為 Binding HTML Classes 或是 Binding Inline Styles。
通常為了分離 HTML 和 CSS,不會使用 Binding Inline Styles,所以這邊只介紹 Binding HTML Classes。
由於綁定 HTML Classes 會使用到 Vue Directives 的 v-bind,且 Vue.js 針對 v-bind 使用在 class 和 style 上有特別增加功能,就是說其表達式的結果可以為 String, Object, Array。
先看個簡單的 v-bind 範例,可以綁定 img 的 src 為 imageSrc
,當修改圖片路徑時,圖片會更新。
而 v-bind:src 可以簡寫為 :src。
附上 jsfiddle https://jsfiddle.net/hunterliu/zq1v3e2k/1/
<div id="app">
<!-- bind an attribute -->
<img v-bind:src="imageSrc">
<!-- shorthand -->
<img :src="imageSrc">
</div>
var vm = new Vue({
el: '#app',
data: {
imageSrc: 'http://via.placeholder.com/350x150'
}
})
vm.$data.imageSrc = 'http://via.placeholder.com/350x150/1'
Vue 可以透過傳入物件或陣列動態的切換 class。
附上 fiddle https://jsfiddle.net/hunterliu/sne6f5zc/3/
簡單改寫上面的範例
附上 fiddle https://jsfiddle.net/hunterliu/auyrptfv/