v-bind的用法

v-bind 的用途

在 v-bind 数据绑定中,常用的方法就是样式Style名称 class 和内联样式 style 的动态绑定

绑定 class 的几种方式

对象语法

给 v-bind 设置一个对象,可以动态切换 class

<div id="app">
    <p :class="{ 'active': isActive }">Show</p>
</div>
<script>
var app = new Vue({
    el: '#app',
    data: {
        isActive: true
    }
});
</script>

v-bind 的 class 可以和普通的 class 共存
:class 的表达式过长或逻辑复杂时,可以绑定一个计算属性。一般当条件多于两个时,都可以试用 data 或 computed

<div id="app">
    <p :class="classes">Show</p>
</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>

数组语法

当需要应用多个 class 时,可以应用数组语法,给 :class 绑定一个数组,应用一个 class 列表

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

绑定内联样式

使用 v-bind:style 可以给元素绑定内联样式,方法与 :class 类似,也有对象数组语法

大多数情况下,会将 style 写在 data 或 computed 里

<div id="app">
    <div :style="styles"></div>
</div>
<script>
var app = new Vue({
    el: '#app',
    data: {
        styles: {
            color: 'red',
            fontSize: 14 + 'px'
        }
    }
});
</script>
Last modification:September 13th, 2018 at 08:01 am

Leave a Comment