Vue：class的对象绑定，style的对象绑定

如何实现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>