Skip to main content

Vue基础-v-model表单

总结​

2.1. v-model基本使用​

  • input手动双向绑定
  • v-model
  • 原理

2.2. v-model其他类型​

  • textarea
  • checkbox
    • 单选
    • 多选
  • radio
  • select
    • 单选
    • 多选

2.3. v-model值绑定​

2.4. v-model修饰符​

  • lazy
  • number
  • trim

v-model的基本使用​

  • 表单提交是开发中非常常见的功能，也是和用户交互的重要手段：
    • 比如用户在登录、注册时需要提交账号密码；
    • 比如用户在检索、创建、更新信息时，需要提交一些数据；
  • 这些都要求我们可以在代码逻辑中获取到用户提交的数据，我们通常会使用v-model指令来完成：
    • v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定；
    • 它会根据控件类型自动选取正确的方法来更新元素；
    • 尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特 殊处理；

v-model的原理​

  • 官方有说到，v-model的原理其实是背后有两个操作：
    • v-bind绑定value属性的值；
    • v-on绑定input事件监听到函数中，函数会获取最新的值赋值到绑定的属性中；

事实上v-model更加复杂

v-model绑定textarea​

  • 我们再来绑定一下其他的表单类型：textarea、checkbox、radio、select
  • 我们来看一下绑定textarea：

  <div id="app">
    <textarea cols="30" rows="10" v-model="content"></textarea>

    <p>输入的内容: {{content}}</p>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data() {
        return {
          content: ""
        }
      },
    })

    // 2.挂载app
    app.mount("#app")
  </script>

v-model绑定checkbox​

  • 我们来看一下v-model绑定checkbox：单个勾选框和多个勾选框

  • 单个勾选框：

    • v-model即为布尔值。
    • 此时input的value属性并不影响v-model的值。

  • 多个复选框：

    • 当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组。
    • 当选中某一个时，就会将input的value添加到数组中。
 <div id="app">
    <!-- 1.checkbox单选框: 绑定到属性中的值是一个Boolean -->
    <label for="agree">
      <input id="agree" type="checkbox" v-model="isAgree"> 同意协议
    </label>
    <h2>单选框: {{isAgree}}</h2>
    <hr>

    <!-- 2.checkbox多选框: 绑定到属性中的值是一个Array -->
    <!-- 注意: 多选框当中, 必须明确的绑定一个value值 -->
    <div class="hobbies">
      <h2>请选择你的爱好:</h2>
      <label for="sing">
        <input id="sing" type="checkbox" v-model="hobbies" value="sing"> 唱
      </label>
      <label for="jump">
        <input id="jump" type="checkbox" v-model="hobbies" value="jump"> 跳
      </label>
      <label for="rap">
        <input id="rap" type="checkbox" v-model="hobbies" value="rap"> rap
      </label>
      <label for="basketball">
        <input id="basketball" type="checkbox" v-model="hobbies" value="basketball"> 篮球
      </label>
      <h2>爱好: {{hobbies}}</h2>
    </div>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data() {
        return {
          isAgree: false,
          hobbies: []
        }
      },
    })

    // 2.挂载app
    app.mount("#app")
  </script>

v-model绑定radio​

  • v-model绑定radio，用于选择其中一项；
<div id="app">
    <div class="gender">
      <label for="male">
        <input id="male" type="radio" v-model="gender" value="male"> 男
      </label>
      <label for="female">
        <input id="female" type="radio" v-model="gender" value="female"> 女
      </label>
      <h2>性别: {{gender}}</h2>
    </div>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data() {
        return {
          gender: "female"
        }
      },
    })

    // 2.挂载app
    app.mount("#app")
  </script>

v-model绑定select​

  • 和checkbox一样，select也分单选和多选两种情况。
  • 单选：只能选中一个值
    • v-model绑定的是一个值；
    • 当我们选中option中的一个时，会将它对应的value赋值到fruit中；
  • 多选：可以选中多个值
    • v-model绑定的是一个数组；
    • 当选中多个值时，就会将选中的option对应的value添加到数组fruit中；
 <div id="app">
    <!-- select的单选 -->
    <select v-model="fruit">
      <option value="apple">苹果</option>
      <option value="orange">橘子</option>
      <option value="banana">香蕉</option>
    </select>
    <h2>单选: {{fruit}}</h2>
    <hr>
    
    <!-- select的多选 -->
    <select multiple size="3" v-model="fruits">
      <option value="apple">苹果</option>
      <option value="orange">橘子</option>
      <option value="banana">香蕉</option>
    </select>
    <h2>多选: {{fruits}}</h2>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data() {
        return {
          fruit: "orange",
          fruits: []
        }
      },
    })

    // 2.挂载app
    app.mount("#app")
  </script>

v-model的值绑定​

  • 目前我们在前面的案例中大部分的值都是在template中固定好的：

    • 比如gender的两个输入框值male、female；
    • 比如hobbies的三个输入框值basketball、football、tennis；

  • 在真实开发中，我们的数据可能是来自服务器的，那么我们就可以先将值请求下来，绑定到data返回的对象中，再通过v-bind来 进行值的绑定，这个过程就是值绑定。

  • 这里不再给出具体的做法，因为还是v-bind的使用过程。

v-model修饰符​

v-model修饰符 - lazy​

  • lazy修饰符是什么作用呢？
    • 默认情况下，v-model在进行双向绑定时，绑定的是input事件，那么会在每次内容输入后就将最新的值和绑定的属性进行同 步；
    • 如果我们在v-model后跟上lazy修饰符，那么会将绑定的事件切换为 change 事件，只有在提交时（比如回车）才会触发；

v-model修饰符 - number​

  • 我们先来看一下v-model绑定后的值是什么类型的：
    • message总是string类型，即使在我们设置type为number也是string类型；

  • 如果我们希望转换为数字类型，那么可以使用 .number 修饰符：

  • 另外，在我们进行逻辑判断时，如果是一个string类型，在可以转化的情况下会进行隐式转换的：
    • 下面的score在进行判断的过程中会进行隐式转化的；

v-model修饰符 - trim​

  • 如果要自动过滤用户输入的守卫空白字符，可以给v-model添加 trim 修饰符：

v-mode组件上使用​

  • v-model也可以使用在组件上，Vue2版本和Vue3版本有一些区别。
  • 具体的使用方法，后面讲

作业​

三. 什么是双向绑定？v-model的本质是什么？​