1.绑定内联样式(style属性)

何时:只修改个别css属性值时,首选修改内联样式
比如:做游戏时,控制主角的方向:left top等控制一个元素的显示隐藏:display:none
如何:

a.不好的方法因为style属性值也是一个巨大的字符串,所以完全可以当做一个普通的字符串属性来绑定:
      1).HTML中:<元素 :style="变量">
      2).new Vue()中:
               data:{
               变量:"css属性1:值1;css属性2:值2;..."
      3).问题:因为多个css属性混在一个字符串中,无法对一个css属性值随意加减,
      不便于修改style中某一个css属性

b.好的做法:将整个styel属性看做一个对象来绑定:
      1).HTML中:<元素 :style="变量">
      2).var vm=new Vue({
              data:{
                  变量:{
                      css属性:值,
                      css属性:值,
                      .....
                  }
              }
      })
      3).优点:非常便于只修改其中某一个css属性!
         vm.变量.css属性值="xxx" //new Vue()之外修改时或
         this.变量.css属性值="xxx" //new Vue()内部修改时

2.绑定class

何时:批量修改多个css属性时,首选修改class属性
比如:带样式的表单验证,提示信息在验证通过样式和验证失败样式之间来回切换因为每种样式都包含多个css属性,所以用class批量修改时最合适的
如何:

a. 不好的做法: 
		1). 将class属性也当做普通的字符串来绑定。
		2). 如何:
		i. HTML中: <元素 :class="变量">
		ii. new Vue({中
				data:{
					变量: "class1 class2 class3 ..."
				}
			})
		3). 缺点: 不便于只操作众多class中的一个

b.好的做法:
         1).将class属性看做一个对象来绑定:
         2).如何:
         i.HTML中:<元素 :class="变量">
         ii.new Vue({
               data:{
                   变量:{//自动翻译为(只有值为true的class,才会翻译进最终的class字符串)
                   class1:true,
                   class2:false,
                   ......:...
                   }
               }
         })

c.如果一个元素上既有固定不变的class,又有个别变化的class
          1). HTML: <元素 class="固定不变的class"  :class="变量">
	  2). new Vue({中
		data:{
			变量: {
				可能变化的class: true或false,
					... : ...
			}
		}
	  })
          3).结果: :class中值为true的class先编译为一个class字符串然后再和不带:
          的class中固定的class字符串拼接在一起,形成最终的一个class,共同修饰这个元素

vue的绑定样式

1.绑定内联样式(style属性)

2.绑定class