学习vue.js中class与style绑定
关于vue.js中class与style绑定的练习代码，分享给大家，供大家参考：
html:
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Vuejs中Class与Style绑定</title>
<linkrel="stylesheet"href="css/vuetext.css">
</head>
<body>
<!--数据绑定常见的需求是绑定class和内联样式
v-bind可以绑定属性class-->
<!--这个表示如果isactive是true时class就与active绑定-->
<divid="app-1"v-bind:class="{active:isActive}">
猴猴呀
</div>
<!--还可以绑定静态样式-->
<divid="app-2"class="static"v-bind:class="{active:isActive}">
lowrie
</div>
<!--还可以直接绑定数据里的一个对象-->
<divid="app-3"v-bind:class="classObject">
猴猴呀
</div>
<divid="app-4"v-bind:class="[activeClass,errorClass]">
lowrie
</div>
<!--关于vue组件会专门再学习-->
<!--v-bind绑定内联样式与绑定class类似数组对象-->
<scriptsrc="js/vue.js"></script>
<scriptsrc="js/vuetext.js"></script>
</body>
</html>
js:
varapp=newVue({
el:'#app-1',
data:{
message:'HelloVue!',
isActive:true,
}
});
varapp2=newVue({
el:'#app-2',
data:{
message:'HelloVue!',
isActive:true,
}
});
varapp3=newVue({
el:'#app-3',
data:{
classObject:{
active:true,
}
}
});
varapp4=newVue({
el:'#app-4',
data:{
activeClass:'active',
errorClass:'text-danger'
}
});
css:
.active{
color:#FFA07A;
};
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。