如何实现class的对象绑定
创建一个点击文字改变颜色的小demo
html
<div id="app">
<div @click="hdclick" :class="{activated: isActivated}">Hello Box</div>
</div>
js
<script>
var app = new Vue({
el:"#app",
data:{
isActivated: false
},
methods:{
hdclick: function(){
this.isActivated = !this.isActivated;
}
}
})
</script>
style
<style>
.activated{
color: red;
}
</style>
效果
第二种写法,使用数组能达到同样的效果
<div id="app">
<div @click="hdclick" :class="[activated]">Hello Box</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
activated: ""
},
methods:{
hdclick: function(){
this.activated = this.activated === "activated" ?
"" : "activated"
}
}
})
</script>
实现style的对象绑定
<div id="app">
<div @click="hdclick" :style="styleObj">Hello Box</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
styleObj: {
color: "black"
}
},
methods:{
hdclick: function(){
this.styleObj.color = this.styleObj.color === "black" ?
"red" : "black"
}
}
})
</script>
在style中使用数组
<div id="app">
<div @click="hdclick" :style="[styleObj, {fontSize: '20px'}]">Hello Box</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
styleObj: {
color: "black"
}
},
methods:{
hdclick: function(){
this.styleObj.color = this.styleObj.color === "black" ?
"red" : "black"
}
}
})
</script>