vue基础（3）样式绑定

理论知识

• 样式也属于标签的一种，因此样式绑定同属性绑定的思路一致，只是语法上有些不同。
• 样式绑定两种方式
  • 对象语法
    • v-bind:class='{key1:value1; key2:value2;.... }',calss中设置的是键值对，key表示给该标签的类名，用在style中使用类选择器选择;value表示key对应的在vue的data中声明的变量,一般为boolean类型。vue通过该变量操作是否启用该类。
  • 数组语法
    • v-bind:class='[value1,value2...]' ，其中value是vue中data属性设置的变量名，此处作为占位符。通过vue可以设置value的值，值可以在style中被选中。
  • 两种方式对比。两者都是通过属性绑定避开了js通过dom操作属性，而是通过vue变量来操作。对象语法主要用在某类一致存在，需要控制该类的样式是否生效。数组语法的权限更高，可以控制类是否存在。
• 样式绑定的细节
  • 对象绑定和数组绑定两种方法是可以混合使用，例如 v-bind:class='[value1,value2,{key:value3}]'
  • 两种方式可以简化使用。因为直接把对象或数组写在vue模板中，显得数据比较长，可以在vue的data中声明一个变量，是模板干净。 v-bind:class='var1',var1=[value1,value2...]
  • 如果有默认的class,通过vue绑定的class不会覆盖默认class.
• 样式绑定也可以直接通过绑定style来进行，即绑定内联样式。其语法和效果同绑定class类似。特别地，当绑定多个样式时，且各样式之间操作对象一致时，会发生覆盖。例如 样式A操作div的背景色，样式B也操作这个div的背景色，则两者会发生覆盖。

实践

• style样式

<style type="text/css">
		.active{
			border: 1px, solid;
			background: green;
		}
	</style>

• vue模板

<div v-bind:class='{active: isActive}'>样式测试</div> //类似json对象
<button @click='changeStyle'>样式切换</button>

• vue实例

	var app = new Vue({
			el: '#app',
			data:{
				isActive: true 
			},
			methods:{
				changeStyle:function(){
					this.isActive=!this.isActive; //操作value的值
				}
			}
		})