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>