通过 v-bind:class 或者 :class 来为style或者class来绑定
绑定class
<div class="test">
<div :class="{active:isActive,cc:isCc}"></div>
</div>js代码
var myVue = new Vue({
el: ".test",
data: {
isActive:true,
isCc:false
},
});或者下面的代码也可以实现
<div class="test"> <div :class=classObject></div> </div>
js代码
var myVue = new Vue({
el: ".test",
data: {
classObject:{
active:true
}
},
});通过过数组将class绑定
<div class="test"> <div :class="[activeClass,error]">dsdsd</div> </div>
js代码
var myVue = new Vue({
el: ".test",
data: {
activeClass:"active",
error:"ddd"
},
});绑定style属性
<div class="test">
<div :style=styleObject>dsdsd</div>
</div>js代码
var myVue = new Vue({
el: ".test",
data: {
styleObject:{
color: "red",
fontSize: "30px"
}
},
});以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHP中文网。
更多vue.js绑定class和style样式相关文章请关注PHP中文网！
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
