美文网首页
五、v-bind及class与style绑定

五、v-bind及class与style绑定

作者: Marshall_Wang | 来源:发表于2018-10-06 21:15 被阅读0次

    我们已经介绍了指令v-bind 的基本用法以及它的语法糖,它的主要用法是动态更新html元素上的属性;

    1、绑定class的几种方式

    <div :class=”{’ active ’: isActive }”></div>

    对象中也可以传入多个属性,来动态切换class 。另外,:class 可以与普通class 共存,如:

    <div class="static": class="{'active': i sActive,'error':isError }"></div>

    当:class 的表达式过长或逻辑复杂时,还可以绑定一个计算属性,这是一种很友好和常见的用法,一般当条件多于两个时,都可以使用data 或computed ,如:

    <div : class= ” classes ” ></ div>

    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 ’

    }

    }

    })

    多个class时,也可以是数组,<div :class = "[activeCls , errorCls]" ></div>

    三目运算:<div : class = ” [ isActive ? activeCls :”, errorCls ] ” ></ div>

    class 有多个条件时,这样写较为烦琐,可以在数组语法中使用对象语法:<div : class =” [{ ’ active ’: isActive } , errorCls ) ” ></ div>

    2、绑定内联样式

    使用v-bind:style (即: style ) 可以给元素绑定内联样式,方法与: class 类似,也有对象语法和数组语法,看起来很像直接在元素上写CSS:

    <div :style="{’ color ’: color, ’ fontSize ’ : fontSize +’ px ’}">文本</div>

    大多数情况下, 直接写一长串的样式不便于阅读和维护,所以一般写在data 或computed 里;另外, 使用: style 时, Vue .js 会自动给特殊的css 属性名称增加前缀, 比如transform 。

    相关文章

      网友评论

          本文标题:五、v-bind及class与style绑定

          本文链接:https://www.haomeiwen.com/subject/jztkaftx.html