Vue 数据双向绑定

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

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

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

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

<!DOCTYPE html>
  <html lang="en">
  <head>
    < charset="UTF-8">
    < name="viewport" content="width=device-width, initial-scale=1.0">
    < 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>

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

<!DOCTYPE html>
<html lang="en">
<head>
  < charset="UTF-8">
  < name="viewport" content="width=device-width, initial-scale=1.0">
  < 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>

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

<!DOCTYPE html>
<html lang="en">
<head>
  < charset="UTF-8">
  < name="viewport" content="width=device-width, initial-scale=1.0">
  < http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"> 
    <div>
      <input type="check@R_455_2@" 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>

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

<!DOCTYPE html>
<html lang="en">
<head>
  < charset="UTF-8">
  < name="viewport" content="width=device-width, initial-scale=1.0">
  < http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"> 
    <div>
      <input type="check@R_455_2@" id="food" value="食品" v-model="types">
      <label for="food">食品</label>
      <input type="check@R_455_2@" id="book" value="图书" v-model="types">
      <label for="book">图书</label>
      <input type="check@R_455_2@" 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>

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

<!DOCTYPE html>
<html lang="en">
<head>
  < charset="UTF-8">
  < name="viewport" content="width=device-width, initial-scale=1.0">
  < http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"> 
    <div>
      <input type="ra" id="yes" value="1" v-model="isFree">
      <label for="one">是</label>
      <input type="ra" 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>

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

<!DOCTYPE html>
<html lang="en">
<head>
  < charset="UTF-8">
  < name="viewport" content="width=device-width, initial-scale=1.0">
  < 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>

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

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

<!-- 当选中时，`picked` 为字符串 "abc" -->
<input type="ra" v-model="picked" value="abc">

<!-- `toggle` 为 true 或 false -->
<input type="check@R_455_2@" v-model="toggle">

<!-- 当选中第选项时，`selected` 为字符串 "001" -->
<select v-model="selected">
  <option value="001">顺丰</option>
  <option value="002">圆通</option>
</select>

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

<input type="check@R_455_2@" id="delivery" v-model="isDelivery" true-value="yes" false-value="no">

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

<input type="ra" v-model="pick" v-bind:value="a">
// 当选中时
vm.pick === vm.a

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

<select v-model="selected">
  <option v-bind:value="{ number: 123 }">123</option>
</select>

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

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

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

如果想将的输入值转为，可以给 v-model number 修饰符：

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

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

<input v-model.trim="msg">

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

←Vue 事件处理

Vue过渡 & 动画→

Vue 数据双向绑定

您的鼓励是对我最大的支持