使用v-bind設(shè)置類名,設(shè)置為true,會起效用,設(shè)置為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,設(shè)置字體為紅色",
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>
