vue添加 class和style
使用vue动态添加class
使用属性绑定的形式进行添加
<h1 :class="['red']">属性绑定red</h1>
也可以直接传递一个数组
<h1 :class="['red','thin']">通过数组绑定red和thin</h1>
在数组中可以使用三元表达式
<h1 :class="['red','thin',flag?'active':'italic']">通过三元表达式设置active</h1>
在数组中使用对象
<h1 :class="['red','thin',{'active':'flag'}]">通过数组中对象设置active</h1>
也可以直接使用对象
<h1 :class="classObj">直接使用对象加载</h1>
上述对应的css如下:
<style type="text/css">
.red{
color:red;
}
.thin{
font-weight:200;
}
.italic{
font-style:italic;
}
.active{
letter-spacing:0.5em;
}
</style>
对应的js如下:
var vm=new Vue({
el:'#app',
data:{
flag:true,
classObj:{red:true,thin:true,active:false,italic:true}
}
})
效果如下:
使用vue动态添加style
可以以对象的形式添加
<h1 :style="styleObj">这是一个标题</h1>
也可以使用对象数组的形式
<h1 :style="[styleObj,styleObj2]">这是一个标题</h1>
对应的js如下:
var vm=new Vue({
el:'#app',
data:{
styleObj:{'color':'red','font-weight':200},
styleObj2:{'font-style':'italic'}
}
})
效果如下: