Vue学习笔记之09-v-model双向绑定

v-model的基本使用

• 在input框中添加指令, v-model, 值为需要绑定的data数据
• 这样的话, 修改input框中的内容, data中的内容也会响应式改变

<div id="app">
    <input type="text" v-model="message">
    {{message}}
  </div>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "你好呀"
      }
    })
  </script>

v-model的原理

• v-model其实是一个语法糖, 它的背后本质是包含两个操作
  • 1. v-bind绑定一个value属性
  • 2. v-on 指令给当前元素绑定input事件

<input type="text" v-model="message">
<!-- 等同于 -->
<input type="text" :value="message" @input="message = $event.target.value">

v-model结合radio的使用

• 在给input的radio设置v-model指令后, 不需要设置相同的name值就可以达到单选的效果
• 在使用v-model绑定radio单选按钮到data数据中的时候, 每次点击单选按钮都会将单选按钮是否选择传入data数据中, 已选传入true, 没选则传入false

<div id="app">
    <label for="male">
      <!-- 在给input的radio设置v-model指令后, 不需要设置相同的name值就可以达到单选的效果 -->
      <input type="radio" id="male" v-model="sex" value="男">男
    </label>
    <label for="female">
      <input type="radio" id="female" v-model="sex" value="女">女
    </label>
    <h2>{{sex}}</h2>
  </div>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        sex: ""
      }
    })
  </script>

v-model结合checkbox使用

• 结合单选checkbox使用
  • 与单选checkbox结合使用的时候, 一般给绑定的data数据声明为boolean值, 记录单选框是否有被选中
• 结合多选checkbox使用
  • 与多选checkbox结合使用的时候, 一般给绑定的data数据声明为一个数组, 因为每次点击checkbox的时候,如果选中则会将其value值传入data数据, 如果没有选中, 则会将对应的data数据删除, 这样就可以记录用户选择了什么

<div id="app">
    <label for="agree">
      <input type="checkbox" id="agree" v-model="isAgree">同意协议
    </label>
    <h2>您的选择是: {{isAgree}}</h2>
    <button :disabled="!isAgree">下一步</button>
    <br>
    <input type="checkbox" v-model="hobby" value="篮球">篮球
    <input type="checkbox" v-model="hobby" value="乒乓球">乒乓球
    <input type="checkbox" v-model="hobby" value="羽毛球">羽毛球
    <input type="checkbox" v-model="hobby" value="网球">网球
    <h2>您的爱好有: {{hobby}}</h2>
  </div>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        isAgree: false, //单选框绑定为boolean值
        hobby: [] // 多选框绑定为一个数组

      }
    })
  </script>

v-model的值绑定

• 实质上就是动态地给value赋值
• 在真实开发中, input的值是从服务器中获取或者定义在data中的
• 所以要通过v-bind:value动态地给value绑定值

<div id="app">
    <!-- v-model的值绑定概念 -->
    <!-- 遍历请求来的数据创建input -->
    <label v-for="item in orginHobby" :for="item">
      <!-- 通过v-model将input绑定在用于记录用户选择的数据中 -->
      <input type="checkbox" :id="item" :value="item" v-model="hobby">{{item}}
    </label>

  </div>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        hobby: [],  // 这里是用于记录用户选中的数据的
        orginHobby: ["篮球", "乒乓球", "羽毛球", "网球", "高尔夫球", "台球"] // 这里可以看作是从服务器中请求来的需要渲染在页面上的数据

      }
    })
  </script>

v-model结合select使用

• select单选
  • v-model绑定的是一个值
  • 当选中option中的一个时, 就会将它的value值传入绑定的data中
• select多选
  • 用multiple属性将select转换为多选
  • v-model绑定的是一个数组
  • 当选中多个值的时候, 就会将选中的option传入绑定的data数组中

<div id="app">
    <select name="frult" v-model="frult">
      <option value="苹果">苹果</option>
      <option value="香蕉">香蕉</option>
      <option value="榴莲">榴莲</option>
      <option value="葡萄">葡萄</option>
    </select>
    <h2>你选择的水果是: {{frult}}</h2>

    <!-- select设置为多选 用multiple属性 -->
    <select name="frults" v-model="frults" multiple>
      <option value="苹果">苹果</option>
      <option value="香蕉">香蕉</option>
      <option value="榴莲">榴莲</option>
      <option value="葡萄">葡萄</option>
    </select>
    <h2>你选择的水果有: {{frults}}</h2>
  </div>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        frult: "苹果", // 如果是单选的select 就设置为一个字符串就好了
        frults: [] // 如果是多选的select 就设置为一个数组
      }
    })
  </script>

v-model的修饰符

• lazy修饰符

  • 默认情况下, v-model默认是在input事件中同步输入框的数据的
  • 也就是说数据一旦发生变化, data中的数据就会立即变化, 这样会降低性能
  • 在v-model指令加上lazy修饰符, 就可以让data数据在input框失去焦点或者用户敲下回车的时候才会更新

• number修饰符

  • 默认情况下,在输入框中无论用户输入的是字符串还是数字, 存储在data中的时候都会被Vue转换为字符串类型
  • 如果想要处理的是数字类型, 那么最好将内容存储为数字类型
  • number修饰符可以将传入的内容转成数字类型

• trim修饰符

  • 如果输入的内容首尾有空格, 我们希望去除的话
  • trim修饰符可以过滤内容左右两边的空格

<div id="app">
    <!-- 1.修饰符: lazy -->
    <input type="text" v-model.lazy="message">
    <h2>{{message}}</h2>

    <!-- 2.修饰符: number -->
    <input type="number" v-model.number="age">
    <h2>{{age}} {{typeof age}}</h2>

    <!-- 3.修饰符: trim -->
    <input type="text" v-model.trim="name">
    <h2>{{name}}</h2>
  </div>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "",
        age: 0,
        name: ""
      }
    })
  </script>