Vue中的样式绑定

Vue 中的样式绑定分为两种

class
以对象的形式，给对应的字段名指定 相应的类名
以数组的形式，往该数组中添加 想要设置 成为的类
style
以对象的形式，给这个对象设置CSS 样式，相当于 写CSS 样式一样
以数组的形式，直接往数组中增删 相应的样式

<div id="app">
	<div 
		@click='handleDivClick'
		:style="styleObj"
	>
		Hello World
	</div>
</div>

<script type="text/javascript">
	var vm = new Vue({
		el:'#app',
		data:{
			isActived:true,
			actived:'',
			styleObj:{
				color:'red',
			}
		},
		methods:{
			handleDivClick:function () {
				this.styleObj.color = this.styleObj.color === 'red' ? 'black' : 'red';
			}
		}
	});
</script>

<!-- <div id="app">
	<div 
		@click='handleDivClick'
		:class='[actived]'
	>
		Hello World
	</div>
</div>

<script type="text/javascript">
	var vm = new Vue({
		el:'#app',
		data:{
			isActived:true,
			actived:''
		},
		methods:{
			handleDivClick:function () {
				this.actived = this.actived === 'actived' ? '' :  'actived';
			}
		}
	});
</script> -->