Vue : v-model 双向绑定

1 . 基本使用和原理

使用v-model指令来实现表单元素和数据的双向绑定

　　v-model也可以用于textarea元素

　　原理，包含了两个操作

　　一、v-bind绑定一个value元素

　　二、v-on指令给当前元素绑定input元素

  <input type="text" v-model="message">
      <!--等同于下面代码-->
      <!--<input type="text" :value="message"
      @input='message = $event.target.value'>-->
      {{message}}

2.v-model ： radio  

  <lable for="male">
        <input type="radio" id="male" value="male" v-model="sex">男人
      </lable>
      <lable for="female">
        <input type="radio" id="female" value="female" v-model="sex" >  女人
      </lable>

3.v-model：CheckBox  单选对应的是Boolean，多选对应的是数组

4.v-model: select  单选对应的是一个值，多选对应的是数组

<select name="abc" v-model="fruit">
          <option value="苹果" >苹果</option>
          <option value="小米" >小米</option>
          <option value="锤子" >锤子</option>
          <option value="华为" >华为</option>
          <option value="OPPO" >OPPO</option>
        </select>
        <h3>{{ fruit }}</h3>

        <select name="abc" v-model="fruits" multiple>
          <option value="苹果" >苹果</option>
          <option value="小米" >小米</option>
          <option value="锤子" >锤子</option>
          <option value="华为" >华为</option>
          <option value="OPPO" >OPPO</option>
        </select>
        <h3>{{ fruits }}</h3>

5.值绑定

<label :for="item" v-for="item in phone" >
          <input type="checkbox" :value="item" :id="item" v-model="phones">{{ item }}
        </label>
        <h4>{{ phones }}</h4>

6.修饰符  lazy、

　　lazy：v-model.lazy  数据在失去焦点或者回车的时候才会更新

<input type="text" v-model.lazy="message">

　　number ：默认为字符串类型；会将内容自动转化为数字类型

　　trim：可以过滤内容左右两边的空格