Vue数据双向绑定-知识专区-汉码未来

当前位置：前端开发 > Vue数据双向绑定

admin · 更新于 2021-08-06

1. 前言

本小节我们将介绍 Vue 中数据的双向绑定指令 v-model。v-model 的学习相对简单。我们可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

2. 解释

用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。— 官方定义

v-model 是 vue 提供的用来对表单控件做数据双向绑定的指令。它可以根据用户的输入动态改变其绑定的值，同样可以根据绑定值的改变来操作页面 DOM 的更新。

3. 基本用法

接下来我们将详细介绍 v-model 在不同表单元素上的使用。

3.1 单行文本 input

实例演示

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <input v-model="name" placeholder="请输入商品名称"/>
      <p>名称是: {{ name }}</p>
    </div>
  </body>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        name: ''
      },
    })
   </script></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

运行案例点击 "运行案例" 可查看在线运行效果

代码解释：
上述代码，我们通过 v-model 给输入框 input 和 name 形成双向绑定，当 input 中数据发生改变时 name 也会发生改变。同理，我们在控制台通过 vm.name = "" 给 name 赋值时输入框的内容也会发生改变。

3.2 多行文本 textarea

实例演示

<!DOCTYPE html><html lang="en"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title></head><body>
  <div id="app">
    <textarea v-model="desc" placeholder="请输入商品描述"></textarea>
    <p>描述是: {{ desc }}</p>
  </div></body><script src="https://unpkg.com/vue/dist/vue.js"></script><script> var vm = new Vue({
	el: '#app',
  data: {
  	desc: ''
  },})</script></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

运行案例点击 "运行案例" 可查看在线运行效果

代码解释：
上述代码，我们通过 v-model 给输入框 textarea 和 desc 形成双向绑定，当 textarea 中数据发生改变时 desc 也会发生改变。同理，我们在控制台通过 vm.desc = "" 给 desc 赋值时输入框的内容也会发生改变。

3.3 单个复选框

实例演示

<!DOCTYPE html><html lang="en"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title></head><body>
  <div id="app"> 
    <div>
      <input type="checkbox" id="delivery" v-model="isDelivery">
      <label for="delivery">{{ isDelivery }}</label>
      <span>选项: {{ isDelivery }}</span>
    </div>
  </div></body><script src="https://unpkg.com/vue/dist/vue.js"></script><script>var vm = new Vue({
	el: '#app',
  data: {
  	isDelivery: false
  },})</script></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

运行案例点击 "运行案例" 可查看在线运行效果

代码解释：
上述代码，我们通过 v-model 给单个选择框 checkbox 和 isDelivery 形成双向绑定，当 checkbox 改变选中状态时 isDelivery 也会发生改变。同理，我们在控制台通过 vm.isDelivery = true 给 isDelivery 赋值时 checkbox 的选中状态也会发生改变。

3.4 多个复选框

实例演示

<!DOCTYPE html><html lang="en"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title></head><body>
  <div id="app"> 
    <div>
      <input type="checkbox" id="food" value="食品" v-model="types">
      <label for="food">食品</label>
      <input type="checkbox" id="book" value="图书" v-model="types">
      <label for="book">图书</label>
      <input type="checkbox" id="clothes" value="衣服" v-model="types">
      <label for="clothes">衣服</label>
      <br>
      <span>类型: {{ types }}</span>
    </div>
  </div></body><script src="https://unpkg.com/vue/dist/vue.js"></script><script>var vm = new Vue({
	el: '#app',
  data: {
  	types: []
  },})</script></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

运行案例点击 "运行案例" 可查看在线运行效果

代码解释：
上述代码，我们通过 v-model 给多个选择框 checkbox 和 types 形成双向绑定，当任意 checkbox 改变选中状态时 types 也会发生改变。同理，我们在控制台通过 vm.types = [] 给 types 赋值时对应 checkbox 的选中状态也会发生改变。

3.5 单选按钮

实例演示

<!DOCTYPE html><html lang="en"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title></head><body>
  <div id="app"> 
    <div>
      <input type="radio" id="yes" value="1" v-model="isFree">
      <label for="one">是</label>
      <input type="radio" id="no" value="0" v-model="isFree">
      <label for="no">否</label>
      <br>
      <span>选择: {{ isFree }}</span>
    </div>
  </div></body><script src="https://unpkg.com/vue/dist/vue.js"></script><script>var vm = new Vue({
	el: '#app',
  data: {
  	isFree: ''
  },})</script></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

运行案例点击 "运行案例" 可查看在线运行效果

代码解释：
上述代码，我们通过 v-model 给单选按钮 radio 和 isFree 形成双向绑定，当 radio 改变选中状态时 isFree 也会发生改变。同理，我们在控制台通过 vm.isFree = 0 给 isFree 赋值时 radio 的选中状态也会发生改变。

3.6 下拉选择框

实例演示

<!DOCTYPE html><html lang="en"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title></head><body>
  <div id="app"> 
    <div>
      <select v-model="company">
        <option value="">请选择</option>
        <option>顺丰</option>
        <option>中通</option>
        <option>圆通</option>
      </select>
      <span>选项: {{ company }}</span>
    </div>
  </div></body><script src="https://unpkg.com/vue/dist/vue.js"></script><script>var vm = new Vue({
	el: '#app',
  data: {
  	company: ''
  },})</script></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

运行案例点击 "运行案例" 可查看在线运行效果

代码解释：
上述代码，我们通过 v-model 给选择框 select 和 company 形成双向绑定，当 select 改变选项时 company 也会发生改变。同理，我们在控制台通过 vm.company = 0 给 company 赋值时 select 的选中项也会发生改变。

4. 值绑定

对于单选按钮、复选框及选择框的选项，v-model 绑定的值通常是静态字符串（对于复选框也可以是布尔值）：

<!-- 当选中时，`picked` 为字符串 "abc" --><input type="radio" v-model="picked" value="abc"><!-- `toggle` 为 true 或 false --><input type="checkbox" v-model="toggle"><!-- 当选中第一个选项时，`selected` 为字符串 "001" --><select v-model="selected">
  <option value="001">顺丰</option>
  <option value="002">圆通</option></select>代码块
1
2
3
4
5
6
7
8
9
10
11

但是有时我们可能想把值绑定到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。

4.1 复选框绑定值

<input type="checkbox" id="delivery" v-model="isDelivery" true-value="yes" false-value="no">代码块
1

代码解释：
上述代码中，我们通过 true-value 和 false-value 给复选框指定来选中和非选中的值，当选中时 vm.isDelivery === 'yes'，当没有选中时 vm.isDelivery === 'no'

4.2 单选按钮绑定值

<input type="radio" v-model="pick" v-bind:value="a">// 当选中时
vm.pick === vm.a代码块
1
2
3

代码解释：
上述代码中，我们通过 v-bind:value 给 randio 指定选中的值，当 radio 选中时 vm.pick === vm.a。

4.3 选择框选项绑定值

<select v-model="selected">
  <option v-bind:value="{ number: 123 }">123</option></select>代码块
1
2
3

代码解释：
上述代码中，我们通过 v-bind:value 给 option 指定 value 值，当该 option 选中时 vm.selected 的值为 { number: 123 }。

5. 修饰符

5.1 .lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步（除了上述输入法组合文字时）。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

<!-- 在“change”时而非“input”时更新 --><input v-model.lazy="msg" >代码块
1
2

5.2 .number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

<input v-model.number="age" type="number">代码块
1

5.3 .trim

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

<input v-model.trim="msg">代码块
1

6. 小结

本小节我们介绍了 Vue 数据双向绑定 v-model 的使用，主要包括以下知识点：

使用 v-model 对 input、textarea、select 等表单项进行数据绑定；
使用 v-bind:value 给表单项的值进行绑定；
v-model 修饰符的使用。

汉码未来

Vue 入门教程

1. 前言

2. 解释

3. 基本用法

3.1 单行文本 input

3.2 多行文本 textarea

3.3 单个复选框

3.4 多个复选框

3.5 单选按钮

3.6 下拉选择框

4. 值绑定

4.1 复选框绑定值

4.2 单选按钮绑定值

4.3 选择框选项绑定值

5. 修饰符

5.1 .lazy

5.2 .number

5.3 .trim

6. 小结

为什么选择汉码未来

线下面授

五人小班

技术强大

内推就业