Class 与 Style 的绑定

操作元素的class 列表和内联样式是数据绑定的一个常见需求。因为他们都是属性,所以可以使用 v-bind 处理它们: 只需要通过表达式计算出字符串结果即可。不过字符串拼接麻烦且易错。因此,将v-bind 用于class 和 style时,Vue.js 做了一个专门的增强。表达式结果的类型除了是字符串之外,还可以是对象或者数组。

绑定 HTML Class


可以传递给v-bind:class 一个对象,以动态的切换class:


<style>
.active {
    color: red;
}
</style>


<div class="dynamic-toggle-class">
    <div :class="{ active:isActive }">
        active on/off
    </div>
    <a @click="toggleActive">toggle</a>
</div>


var toggleClass = new Vue({
    el:'.dynamic-toggle-class',
    data:{
        isActive:true
    },
    methods:{
        toggleActive: function () {
            this.isActive = !this.isActive;
        }
    }
});

上述语法表示 active 这个class 存在与否将区取决于数据属性 isActive 的 truthiness。
可以再对象中传入更多的属性来动态切换多个class, 此外 v-bind 指令也可以与普通的class 属性共存。


    <div class="static" :class="{ active: isActive, '.text-danger': hasError }">
    ...
    </div>
    
    // data
    {
        isActive: true,
        hasError: false
    }
    
    // result
    <div class="static active">...</div>

当isActive 或者 hasError 变化时,class 列表将会更新。例如,如果 hasError 的值为true,class 列表将变为 "static active text-danger"
绑定的数据对象不一定需要内联定义在模板里:


<div class="classObject">...</div>

data:{
    classObject:{
        active:true,
        'text-danger':false
    }
}

// 渲染结果与上面一样, 可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式:

<div class="classObject">...</div>

data:{
    isActive:true,
    error: null
},
computed: {
    classObject:function(){
        return {
            active: this.isActive && !this.error,
            'text-danger': this.error && this.error.type ==='fatal'
        }
    }
}

数组语法

可以将一个数组传给 v-bind:class, 以应用一个class列表。


    <div :class="[activeClass,errorClass]">
        ...
    </div>
    
    data:{
        activeClass:'active',
        errorClass:'text-danger'
    }
    
    // 渲染效果为:
    <div class="active text-danger">...</div>
    // 这样将始终添加errorClass,但是只有在 isActive 是 truthy 时候才添加activeClass。
    // 不过,当有多个条件class 的时候,为避免繁琐,可以再数组语法中使用对象语法。
    <div v-bind:class="[{ active: isActive }, errorClass]">...</div>
用在组件上

当在一个自定义组件上适应class 属性的时候,这些类将被添加到该组件的根元素上面。这个元素上面已经存在的类不被覆盖。
e.g.


    Vue.component('my-component',function(){
        template:'<p class="foo bar">SayHi</p>'
    });
    
    <my-componetnt class="baz boo"></my-component>
    
    // 最终渲染结果:
    <p class="foo bar baz boo"></p>
    
    // 对于带数据绑定的class 同样适用
    <my-component :class="{ active: isActive}"></my-component>
    
    // 当 isActive 为 truthy 时,Html 将被渲染成为:
    <p class="foo bar active"></div>

绑定内联样式


对象语法

v-bind:style 的对象语法十分直观–看着试分析像是CSS, 但是其实是一个javascript对象。css 属性名可以用驼峰式(camelCase) 或 短横线分割(kebab-case,记得用单引号括起来)来命名:


<div v-bind:style="{ color:activeColor, fontSize: fontSize + 'px'}">
</div>

data:{
    activeColor: 'red',
    fontSize: 30
}

// 直接绑定到一个样式对象通常更好,让模板更加清晰

<div v-bind:style="styleObject"></div>

data:{
    styleObject:{
        color:'red',
        font-size: 13px
    }
}
// 同样的 对象语法常常结合返回对象的计算属性使用。
数组语法

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上:

 
    <div v-bind:style="[baseStyle, overridingStyles]"></div>
    
自动添加前缀

v-bind:style 使用需要添加浏览器引擎前缀的css 属性时, 如transform,vue.js 会自动侦测并添加相应的前缀。

多重值

从2.3.0 起,可以为style 绑定中的属性提供一个包含多个值的数组,常用于提供多个带前缀的值

 

    <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
    

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中,如果浏览器支持不带浏览器前缀的 flexbox,那么就只会渲染 display: flex。

发表评论

邮箱地址不会被公开。 必填项已用*标注