表单的双向绑定

# 表单的双向绑定 v-model

# 介绍

v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

v-model 本质上不过是语法糖，它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理

text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

原理就是v-bind绑定上述值，v-on绑定上述实际。例如一个text类型的input：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
  </head>

  <body>
    <div id="app">
      <input type="text" v-model="message" />
      <h2>{{message}}</h2>
      <input type="text" :value="message" @input="valueChange" />
      <input
        type="text"
        :value="message"
        @input="message = $event.target.value"
      />
    </div>

    <script src="vue.js"></script>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          message: "Hello",
        },
        methods: {
          valueChange(event) {
            this.message = event.target.value;
          },
        },
      });
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

# 使用 🔥

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>

    <template id="my-app">
      <!-- 1.绑定textarea -->
      <label for="intro">
        自我介绍
        <textarea
          name="intro"
          id="intro"
          cols="30"
          rows="10"
          v-model="intro"
        ></textarea>
      </label>
      <h2>intro: {{intro}}</h2>
      <hr />

      <!-- 2.radio -->
      <span>你的爱好: </span>
      <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: {{gender}}</h2>
      <hr />

      <!-- 3.checkbox -->
      <!-- 3.1.单选框 -->
      <label for="agree">
        <input id="agree" type="checkbox" v-model="isAgree" /> 同意协议
      </label>
      <h2>isAgree: {{isAgree}}</h2>

      <!-- 3.2.多选框 -->
      <span>你的爱好: </span>
      <label for="basketball">
        <input
          id="basketball"
          type="checkbox"
          v-model="hobbies"
          value="basketball"
        />
        篮球
      </label>
      <label for="football">
        <input
          id="football"
          type="checkbox"
          v-model="hobbies"
          value="football"
        />
        足球
      </label>
      <label for="tennis">
        <input id="tennis" type="checkbox" v-model="hobbies" value="tennis" />
        网球
      </label>
      <h2>hobbies: {{hobbies}}</h2>
      <hr />

      <!-- 4.select -->
      <!-- multiple则绑定到数组中，否则绑定到字符串中 -->
      <span>喜欢的水果: </span>
      <select v-model="fruit" multiple size="2">
        <option value="apple">苹果</option>
        <option value="orange">橘子</option>
        <option value="banana">香蕉</option>
      </select>
      <h2>fruit: {{fruit}}</h2>
    </template>

    <script src="../lib/vue@3.2.26.js"></script>
    <script>
      const App = {
        template: '#my-app',
        data() {
          return {
            intro: 'Hello World',
            isAgree: false,
            hobbies: ['basketball'],
            gender: '',
            fruit: ['banana'], // multiple则绑定到数组中，否则绑定到字符串中
          }
        },
      }

      Vue.createApp(App).mount('#app')
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

# 绑定 checkbox 注意

v-model绑定checkbox分单个勾选框和多个勾选框：

单个勾选框

v-model即为布尔值。此时input的value并不影响v-model的值
多个复选框

当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组。当选中某一个时，就会将input的value添加到数组中

# 绑定 select 注意

v-model绑定select也分单个勾选框和多个勾选框：

单选

v-model绑定的是一个值，整体是string类型
多选

v-model绑定的是一个数组

# 修饰符 🔥

# lazy 🔥

默认情况下，v-model在进行双向绑定时，绑定的是input事件，那么会在每次内容输入后就将最新的值和绑定的属性进行同步

如果我们在v-model后跟上.lazy修饰符，那么会将绑定的事件切换为change事件，只有在提交时(比如回车) 才会触发

# number 🔥

v-model绑定后的值是string类型的，希望转换为数字类型，那么可以使用.number 修饰符

进行逻辑判断时，如果是一个string类型，在可以转化的情况下会进行隐式转换

# trim 🔥

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

# 组件上使用 🔥

vue2 和 vue3 有很大区别！！！

编辑

上次更新: 2022/03/23, 17:55:39

← 计算属性&侦听器组件化开发→