07-表单绑定v-model

对于用户信息的提交，需要大量表单。

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

一、v-model原理

v-model其实是一个语法糖，本质是包含两个操作：

1. v-bind绑定一个value属性

2. v-on给当前元素绑定input时间

相当于以下代码：

<input type="text" :value='message' @input='message = $event.target.value'>

二、v-model:radio

下面演示v-model与单选框radio的联合使用，可以通过加v-model属性让两个单选框的选择属性互斥，在data中可以定义默认选项，也可为空（都不选）。

添加v-model后还能将选择的选项的value值传递。

    <div id="app">
      <label for="">
        <input type="radio" id="male" value="男" v-model='sex'>男
      </label>
      <label>
        <input type="radio" id="female" value="女" v-model='sex'>女
      </label>
      <h2>您选择的性别是:{{sex}}</h2>
    </div>
  
    <script>
    const app = new Vue({
      el:'#app',
      data:{
        message:'hello',
        sex:'男'
        // 选择的默认值，可为空
      }
    })
    </script>

三、v-model:checkbox

单选框

    <div id="app">
      <!-- 添加label是为了选择文字时也可以选中复选框 -->
      <label for="license">
        <input type="checkbox" id="license" v-model='islicense'>同意协议
      </label>
      <h2>您选择的是：{{islicense}}</h2>
      <button :disabled = '!islicense'>下一步</button>
    </div>
    <script>
    const app = new Vue({
      el:'#app',
      data:{
        message:'hello',
        islicense:false
      }
    })
    </script>

多选框

    <div id="app">
        <input type="checkbox" value="互联网" v-model='arr'>互联网
        <input type="checkbox" value="信息安全" v-model='arr'>信息安全
        <input type="checkbox" value="软件" v-model='arr'>软件
        <input type="checkbox" value="硬件" v-model='arr'>硬件
        <h2>你选择了：{{arr}}</h2>
    </div>

    <script>
    const app = new Vue({
      el:'#app',
      data:{
        message:'hello',
        arr:[]
      }
    })
    </script>

四、v-model:select

单选

    <div id="app">
      <select name="abc" id="" v-model='milktea'>
        <option value="一点点">一点点</option>
        <option value="coco">coco</option>
        <option value="丸摩堂">丸摩堂</option>
        <option value="茶颜悦色">茶颜悦色</option>
      </select>
      <h2>您选择的是：{{milktea}}</h2>
    </div>
  
    <script>
    const app = new Vue({
      el:'#app',
      data:{
        milktea:'一点点'
      }
    })
    </script>

多选

    <div id="app">
      <select name="abc" id="" v-model='milkteas' multiple>
        <option value="一点点">一点点</option>
        <option value="coco">coco</option>
        <option value="丸摩堂">丸摩堂</option>
        <option value="茶颜悦色">茶颜悦色</option>
      </select>
      <h2>您选择的是：{{milkteas}}</h2>
    </div>
  
    <script>
    const app = new Vue({
      el:'#app',
      data:{
        milkteas:[]
      }
    })
    </script>

五、值绑定

vue的值绑定用语言动态的给value绑定值，更好的接收可能来自服务器定义的值：

    <div id="app">
    <label v-for='itm in backtea' :for='itm'>
      <input type="checkbox" :value = 'itm' :id = 'itm' v-model='milktea'>
      {{itm}}
    </label>  
    <h2>您选择的是：{{milktea}}</h2>
    </div>
  
    <script>
    const app = new Vue({
      el:'#app',
      data:{
        milktea:[],
        backtea:['一点点','coco','书亦烧仙草','丸摩堂']
      }
    })
    </script>

六、修饰符

6.1 lazy

v-model默认是双向绑定数据的，一旦数据发生改变对应的data中的数据就会发生改变。

lazy修饰符可以让数据在失去焦点或者敲击回车时才改变

     <input type="text" v-model.lazy="message">
      <h2>{{message}}</h2>

6.2 number

默认情况下输入框中输入的字母和数字都会被当成字符串string进行处理。

使用number修饰符可以使输入的内容自动转换为数字类型。

      <input type="text" v-model.number="message">
      <h2>{{message}}--{{typeof message}}</h2>

6.3 trim

当用户输入很多空格时（浏览器可能会默认去除，但实际首尾会存在很多空格），

使用trim修饰符可以过滤左右两边的空格。

      <input type="text" v-model.trim="message">
      <h2>{{message}}</h2>