理清class和style绑定

绑定class的使用情况
首先定义好class样式,
第一种:传递一个数组
:class="[‘active’,‘thin’]"相当于class=“active thin”

第二种:在数组中使用三元表达式(符合条件时添加该样式)
:class="[‘thin’,‘italic’,flag?‘active’:’’]"

第三种对象代替三元表达式 (二三都需要在data中定义flag时true/false):class="[‘thin’,‘italic’,{‘active’:flag}]"

第四种绑定对象,而对象的属性可带引号也可不带引号
:class=“classObj”
data:{classObj:{red:true, thin:true, italic:false,active:false }}

※何时使用它:一般定义多个class或者不同条件时显示不同class
把class写在data内的一个名字,通过绑定此名调用class数组

绑定style
1.直接在元素上通过:style书写样式对象
:style="{color:“red”,font-size:“40px”}"

2.将样式对象,定义到data中,并直接引用到:style中
data:{
styleObj1:{color:“red”,font-size:“40px”}
}

3.在:style通过数组,引用多个data上的样式对象
data:{
styleObj1:{color:“red”,font-size:“40px”},
styleObj2:{font-weight:bold}
}

反正就是一句话:将样式对象,定义到data中,并直接引用到:style中,还可引用多个data上的样式对象,就要用style,条件样式就是:class

你可能感兴趣的:(vue)