Vue 数据双向绑定_Vue 入门教程-慕课网

此间少年_ · 更新于 2020-12-07

Vue过渡 & 动画

Vue 实例生命周期

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>

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

代码解释：
上述代码，我们通过 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>

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

代码解释：
上述代码，我们通过 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>

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

代码解释：
上述代码，我们通过 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>

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

代码解释：
上述代码，我们通过 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>

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

代码解释：
上述代码，我们通过 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>

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

代码解释：
上述代码，我们通过 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>

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

4.1 复选框绑定值

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

代码解释：
上述代码中，我们通过 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

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

4.3 选择框选项绑定值

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

代码解释：
上述代码中，我们通过 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" >

5.2 .number

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

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

5.3 .trim

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

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

6. 小结

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

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

Vue过渡 & 动画

Vue 实例生命周期

我要提出意见反馈

热搜

最近搜索 清空

我的购物车

已加入门课程

购物车里空空如也

Vue 入门教程

前端开发

JavaScript

JavaScript 入门教程

TypeScript 入门教程

Vue 入门教程

Ajax 入门教程

ES6-10 入门教程

Yarn 入门教程

ECharts 入门教程

HTML & CSS

CSS3 入门教程

雪碧图入门教程

移动端布局教程

Html5 入门教程

Sass 入门教程

HTML 入门教程

canvas 入门教程

uni-app 入门教程

服务端相关

服务器

Nginx 入门教程

HTTP 入门教程

Docker 入门教程

Shell 入门教程

Linux 入门教程

开发工具

Gradle 入门教程

Vim 编辑器教程

RESTful 规范教程

Dreamweaver 教程

Markdown 入门教程

Maven 入门教程

Eclipse 编辑器教程

GitHub 入门教程

Android Studio 编辑器教程

PyCharm 编辑器教程

Sublime Text 使用教程

Postman 教程

Git入门教程

热门服务端语言

C 语言入门教程

Go 入门教程

Kotlin 教程

Ruby 入门教程

ThinkPHP 入门教程

Java

基础应用

Java 入门教程

Android 入门教程

算法入门教程

数据结构入门教程

Lambda 表达式教程

Java 并发原理入门教程

设计模式入门教程

Java并发工具

JVM 入门教程

RabbitMQ 入门教程

网络编程入门教程

后端通用面试教程

框架应用

Spring Boot 入门教程

Spring 入门教程

Hibernate 入门教程

MyBatis 入门教程

Spring MVC 入门教程

Swagger 入门教程

Zookeeper 入门教程

Netty 教程

Spring Security

微服务

Spring Cloud Hystrix

Python

基础应用

Python 入门语法教程

最近搜索清空