使用v-bind设置类名,设置为true,会起效用,设置为false,添加的样式无效
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="util/vue-2.4.0.js"></script>
<style>
.red{
color: red;
}
</style>
</head>
<body>
<div id="test">
<p v-text="msg" v-bind:class="classobj"></p>
<input type="button" :value="msg1" v-on:click="taggle_class"/>
</div>
<script>
var vm1 = new Vue({
el:"#test",
data:{
msg:"使用v-bind绑定class,设置字体为红色",
msg1:"点击切换字体颜色",
classobj:{red:true}
// 绑定类,使用对象,可以绑定多个类,key可以写引号也可以不写引号
},
methods: {
taggle_class:function() {
console.log(this.classobj);
if (this.classobj["red"] == true) {
this.classobj["red"] = false
} else {
this.classobj["red"] = true
}
}
}
})
</script>
</body>
</html>
