【Vue基础笔记】v-bind绑定class、style语法

1. 绑定class对象语法,对象的键是类名,值是布尔值
<div :class="{'divStyle' : isActive}"></div>
.divStyle{color:red}
isActive:true
——————————————————————————————————————————
当绑定多个class,多个class组合判定布尔值比较复杂时,可以利用计算属性来return布尔值

2. 绑定class数组语法
同样,如果需要需要绑定多个class,还可以使用数组语法来表示,数组成员直接对应类型--data:{className:类名}

3. 混合绑定class对象和数组语法
<div :class="[{'divStyle' : isActive}, errorClass]"></div>

——————————————————————————————————————————
1. 绑定style对象语法
<div :style={'color' : color, 'font-size': fontSize+'px'}></div>
Data:{
color:'red',
fontSize:16,
}
使用style绑定样式时,Vue会自动给css3的样式属性添加类似-webkit-前缀

posted on 2019-03-13 10:29  65Seeker  阅读(307)  评论(0编辑  收藏  举报