元素属性使用v-bind指令绑定class与style的一些方法

DOM元素经常动态绑定一些类名或者style样式。
v-bind指令的作用：主要用于动态更新HTML。
下面是，元素属性使用v-bind指令绑定class与style的一些方法：

1.class-对象语法-单类名切换 语法：传给 v-bind:class 一个对象，以动态地切换 class

<div class="app">
			<p :class='{activ:activ_1}'>{{info}}</p>
			<button @click='change'>开始切换</button>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el:'.app',
				data:{
					info:'单类名切换',
					activ_1:true
				},
				methods:{
					change:function(){
						this.activ_1=false;
					}
				}
			})
		</script>

2.多类名切换 在对象中也可以传入多个属性来动态切换多个 class

<div class="app">
			<p :class="{activ:activA,area:areaA,status:statusA}">河北</p>
		</div>
		<script>
			var app = new Vue({
				el:'.app',
				data:{
					activA:true,
					areaA:false,
					statusA:true
				}
			})
		</script>

3.v-bind:class 指令也可以与普通的 class 属性共存

<div class="app">
			<p class="www" :class="{activ:activA,area:areaA,status:statusA}">河北</p>
		</div>
		<script>
			var app = new Vue({
				el:'.app',
				data:{
					activA:true,
					areaA:false,
					statusA:true
				}
			})
		</script>

4.class-对象语法-对象包裹 绑定的数据对象不必都定义在模板里，也可以用一个大对象包裹起来

<div class="app">
			<p :class="zz">河北</p>
			<button @click='change'>切换类名</button>
		</div>
		<script>
			var app = new Vue({
				el:'.app',
				data:{
					zz:{
						activA:true,
					}
				},
				methods:{
					change:function(){
						this.zz.activA=false;
						this.zz.areaA=true;
					}
				}
			})
		</script>

5.class-对象语法-计算属性 当:class的表达式过长或者逻辑复杂时，可以绑定计算属性

<div class="app">
			<p :class="cl">计算属性</p>
		</div>
		<script>
			var app = new Vue({
				el:'.app',
				data:{
					isActiv:true,
					isArea:false
				},
				computed:{
					cl:function(){
						return{
							activ:this.isActiv&&this.isArea,
							area:this.isActiv&& !this.isArea,
							status:!this.isActive||!this.isArea
						}
					}
				}
			})
		</script>

6.class-数组语法-普通数组 当需要应用多个class时，可以使用数组语法

<div class="app">
			<p :class="[activA,areaA,statusA]">数组</p>
		</div>
		<script>
			var app = new Vue({
				el:'.app',
				data:{
					activA:activ,
					areaA:area,
					statusA:status
				}
			})
		</script>

7.class-数组语法-表达式

<!--案例一-->
		<div class="app">
			<p :class="[activA?areaA:'',statusA]">数组</p>
		</div>
		<script>
			var app = new Vue({
				el:'.app',
				data:{
					activA:true,
					areaA:'area',
					statusA:'status'
				}
			})
		</script>

<!--案例二-->
		<div class="app">
			<p :class="[a?a:b,c]">数组</p>
			<button @click='change'>切换</button>
		</div>
		<script>
			var app = new Vue({
				el:'.app',
				data:{
					a:'activ',
					b:'area',
					c:'status'
				},
				methods:{
					change:function(){
						this.a=false;
					}
				}
			})
		</script>

8.class-数组语法-数组对象嵌套 当class为多条件时，三元表达式写法较为繁琐，可以在数组里嵌套对象

<div class="app">
			<p :class='[{"class":className},class2]'>数组对象嵌套</p>
		</div>
		<script>
			var app = new Vue({
				el:'.app',
				data:{
					className:false,
					class2:'area'
				}
			})
		</script>

9.class-数组语法-计算属性 当:class的表达式过长或者逻辑复杂时，可以绑定计算属性computed

10.内联样式style-对象语法 v-bind:style 的对象语法十分直观，看着非常像 CSS，但其实是一个 JS对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名

<div class="app">
			<p :style="{'color':colorName,'fontSize':sizeA+'px'}">内联样式style绑定</p>
		</div>
		<script>
			var app = new Vue({
				el:'.app',
				data:{
					colorName:'red',
					sizeA:22
				}
			})
		</script>

11.内联样式style-对象包裹语法 大多数情况下，直接写一长串的样式不便于阅读和维护，所以一般写在data或者computed里，

<!--以data为例-->
<div class="app">
			<p :style="styleN">内联样式style绑定,对象包裹语法</p>
		</div>
		<script>
			var app = new Vue({
				el:'.app',
				data:{
					styleN:{
						color:'red',
						fontSize:50+'px'
					}
				}
			})
		</script>