v-bind 動態更新 HTML 元素上的屬性

xuanxuanQueen發表於2019-08-20
HTML
  1. 用於文字插值
  2. 動態繫結元素的樣式名稱class和內聯樣式style

  • 繫結class的幾種方式

    1. 物件語法：給v-bind:class設定一個物件，可以動態地切換class

      <div v-bind:class="{ 'active': isActive }"></div>
<script>
var app = new Vue({
el: '#app',
data: {
    isActive:true
}
})
</script>

      當class的表示式過長或邏輯複雜時，還可以繫結一個計算屬性

      <div id="app">
<div :class="classes"></div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
    isActive: true,
    error:null
},
computed: {
    classes: function () {
        return {
            active: this.isActive && !this.error,
            'text-fail': this.error && this.error.type === 'fail'
        }

    }
}
})
</script>

    2. 陣列語法：當需要應用多個class時，給:class繫結一個陣列，應用一個class列表

      <div id="app">
<div :class="[activeCls, errorCls]"></div>
</div>
<script>
var app = new Vue({
el:'#app',
data: {
    activeCls: 'active',
    errorCls: 'error'
}
})
</script>

      class有多個條件時，可以在陣列語法中使用物件語法

      <div id="app">
<div :class="[{ 'active': isActive }, errorCls]"></div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
    isActive: true,
    errorCls: 'error'
}
})
</script>

      陣列語法也可以使用data,computed和methods三種方法，以計算屬性為例：

      <div id="app">
<button :class="classes"></button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
    size: 'large',
    disabled:true
},
computed: {
    classes: function () {
        return [
            'btn',
            {
                ['btn-' + this.size]: this.size !== '',

            }
        ];
    }
}
})
</script>
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章