Vue-05-v-model 双向绑定

一、表单绑定 v-model ，双向绑定

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

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

v-model 实现双向绑定的原理

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

v-model 其实是一个语法糖，它的背后本质上包含2个操作：

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

2. v-on 指令给当前元素绑定input事件

除了input，也可将v-model用于textarea元素

1. v-model 结合 radio

  <div id="app">
    <label><input type="radio" value="男" v-model="sex">男</label>
    <label><input type="radio" value="女" v-model="sex">女</label>
    <h2>您选择的性别是：{{sex}}</h2>
  </div>
  <script src="./js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好',
        sex: '男'
      }
    })
  </script>

2. v-model 结合 checkbox

checkbox 单选框应用（同意协议），单选框时对应布尔类型，绑定checked

  <div id="app">
    <!-- checkbox单选框应用 -->
    <label><input type="checkbox" v-model="isAgree">同意协议</label>
    <h2>您选择的是:{{isAgree}}</h2>
    <button :disabled="!isAgree">下一步</button>
  </div>
  <script src="./js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好',
        isAgree: false
      }
    })
  </script>

checkbox 多选框应用，多选框时对应数组类型，绑定value

  <div id="app">
    <!-- checkbox多选框应用 -->
    <label><input type="checkbox" value="篮球" v-model="hobbies">篮球</label>
    <label><input type="checkbox" value="足球" v-model="hobbies">足球</label>
    <label><input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球</label>
    <label><input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球</label>
    <h2>您的爱好有:{{hobbies}}</h2>
  </div>
  <script src="./js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        hobbies: []
      }
    })
  </script>

3. v-model 结合 select

单选，对应字符串类型

  <div id="app">
    <!-- 1.单选 -->
    <select name="abc" v-model="fruit">
      <option value="苹果">苹果</option>
      <option value="香蕉">香蕉</option>
      <option value="西瓜">西瓜</option>
      <option value="葡萄">葡萄</option>
    </select>
    <h2>您选择的水果是：{{fruit}}</h2>
  </div>
  <script src="./js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        fruit: '西瓜'
      }
    })
  </script>

多选，对应数组类型

  <div id="app">
    <!-- 2.多选 -->
    <select name="abc" v-model="fruits" multiple>
      <option value="苹果">苹果</option>
      <option value="香蕉">香蕉</option>
      <option value="西瓜">西瓜</option>
      <option value="葡萄">葡萄</option>
    </select>
    <h2>您选择的水果是：{{fruits}}</h2>
  </div>
  <script src="./js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        fruits: []
      }
    })
  </script>

二、值绑定

即动态地给value赋值（实际就是v-bind）

  <div id="app">
    <!-- 值绑定 -->
    <label v-for="item in originHobbies" :for="item">
      <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
    </label>
    <h2>您的爱好有:{{hobbies}}</h2>
  </div>
  <script src="./js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        originHobbies: ['篮球', '足球', '羽毛球', '乒乓球', '高尔夫球'],
        hobbies: []
      }
    })
  </script>

三、v-model 修饰符

（1）.lazy

v-model默认是在input事件中同步输入框的数据的。.lazy 可以让数据在失去焦点或者回车时才会更新

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

（2）.number

默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当作字符串类型进行处理。.number 可以让在输入框中输入的内容自动转化成数字类型

    <input type="number" v-model.number="age">

（3）.trim

如果输入的内容首尾有很多空格，通常我们希望将其去除。.trim 可以过滤内容左右两边的空格

    <input type="text" v-model.trim="name">

（4）.native

监听组件根元素的原生事件

    <!-- 组件不能直接监听点击，如果监听需要加.native -->
    <back-top @click.native="backClick" />