vue class,style绑定

2.2.4 表单控件的双向绑定
1. v-model指令可以对表单控件进行双向绑定；此时checked,selected,value等被自动忽略；
<inpit type="text" v-model="message">
    <span> Your input is : {{ message }} </span>




2. Checkbox, Select如果为一个时，用法与input一样，此时value无效；此时v-model绑定的变量为 字符串；
   Checkbox, Select如果为多个时，则使用v-model的同时，需要value辅助；此时v-model绑定的变量为 数组；




   Radio使用举例:  (此时的gender是字符串类型)
   <label><input type="radio" value="male" v-model="gender">男</label>
       <label><input type="radio" value="femail" v-model="gender">女</label>
       <p>{{ gender }}</p>




       Checkbox使用举例：(如果只有一个checkbox,那么绑定的变量为字符串类型; 如果有多个checkbox，那么绑定的变量为数组类型)
       <input type="checkbox" v-model="checked">
       <span>checked: {{ checked }}</span>


       <br><br>
       <label><input type="checkbox" value="1" v-model="multichecked"></label>
       <label><input type="checkbox" value="2" v-model="multichecked"></label>
       <label><input type="checkbox" value="3" v-model="multichecked"></label>
       <p>MultiChecked: {{ multichecked }} </p>






2.2.5 Class的绑定
  class和style都是Dom元素的attribute,可以使用v-bind对这两个属性进行数据绑定；
  表达式结果类型为: 字符串，数组，以及对象；


  (1) v-bind:class接受参数是一个对象，而且可以与普通的class属性共存。
    <div class="tab" v-bind:class="{ 'active':active, 'unactive': !active }">
    在vue中  data : { active:true }
    渲染结果为: <div ckass="tab active"></div>


      (2) v-bind:class接受参数是一个数组
        <div v-bind:class="[classA, classB]"></div>
        vm实例中 data: { classA: 'class-a', classB:'class-b' }
        渲染结果为: <div class="class-a class-b"></div>






2.2.6 Style的绑定
  表达式结果类型: 数组， 对象； (总之，最后需要转换为一个对象)


  （1）v-bind:style绑定对象
  <div v-bind:style="alertStyle"></div>
      data : {


      alertStyle : {


      color: 'red',
      fontSize: '20px'
      }


      }




  (2) v-bind:style绑定数组
  <div v-bind:style="{.styleObjectA, styleObjectB }"></div>     




2.2.7 自动添加前缀
   在使用transform这类属性时， v-bind:style会根据需要自动添加厂商前缀。 :style在运行时进行前缀探测，如果浏览器版本本身就支持不加前缀的css属性，那么就不会添加。