class与style事件绑定有三种:分别为(1)对象(2)数组(3)表达式
- class 对象事件绑定如何来使用的呢 看如下代码
.isi{
height: 100px;
width: 100px;
background: red;
} 写了一个样式用来绑定
下面看data
data:{
msg:true
}
将样式绑定给数据模型
<div :class="{isi:msg}"></div>
我们要知道class对象绑定得方式如下 {
classNanme:数据模型
}
数组方式
看方式:
<div :class="[msg]"></div>
看data
data:{
msg:"isi"
}
这里用第一个案例的样式 我们将样式直接绑定给msg
表达式
这里我们添加一个为isi2的样式
.isi2{
height: 100px;
width: 100px;
background: red;
}
看如何绑定的
<div :class="msg>6?'isi':'isi2'"></div>
看data
data:{
msg:5,
}
那么学习完calss动态绑定样式之后我们来学习一下style如何绑定
对象绑定
首先先看data
data:{
msg:"这是style 对象绑定",
"color":"red",
"fontSize":"50px",
}
来看div 如何绑定
<div :style="{color:color,fontSize:fontSize}">{{msg}}</div>
数组绑定
<div :style="[arr]">{{msg}}</div>
看data:
data:{
msg:"这是style 数组绑定",
arr:{
color:"red",
background:"yellow",
fontSize:"50px",
}
}
表达式绑定
<div :style="ms"></div>
看data:
data:{
msg:"这是style 表达式绑定",
ms:{
color:"red",
background:"yellow",
fontSize:"50px",
}
}
如上就是动态事件绑定 在下也是新手 如果有不懂的地方请去https://cn.vuejs.org/v2/guide/class-and-style.html#%E6%95%B0%E7%BB%84%E8%AF%AD%E6%B3%95 Vue官网学习 谢谢