10《Vue 入门教程》Vue 双向绑定指令
lipiwang 2025-05-28 18:35 4 浏览 0 评论
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>
12345678910111213141516171819202122232425"运行案例" 可查看在线运行效果
代码解释： 上述代码，我们通过 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 修饰符的使用。
相关推荐
- 小程序-如何获取用户表单控件中的值
-
背景在小程序开发中,经常有用到表单,我们往往需要在小程序端获取用户表单输入框中的值(通常用户输入的有:switch,input,checkbox,slider,radio,picker)等,通过触发事...
- Js基础7:表单元素属性
-
一、封装获取元素的方法封装思想——函数封装——代码复用 function get_id(id){ //这个函数是专门来通过id获...
- 泰媒:到泰国曼谷旅游，注意别被嘟嘟车司机坑!
-
据泰国《世界日报》微信公众号报道，近日，一名导游投诉称，3名外籍游客在泰国曼谷搭载嘟嘟车时，被嘟嘟车司机坑。该导游认为嘟嘟车司机坑害外国游客的行为，破坏泰国的旅游形象，希望能以此为戒。当地时间25日上...
- 快速了解JavaScript的表单操作
-
前言在HTML中使用<form>表单元素在JavaScript中对应的是HTMLFormElement类型，而HTMLFormElement继承了HTMLElement接口...
- 10《Vue 入门教程》Vue 双向绑定指令
-
1.前言本小节我们将介绍Vue中数据的双向绑定指令v-model。v-model的学习相对简单。我们可以用v-model指令在表单<input>、<textarea&...
- 手把手教你搭建消防安全答题小程序-实现答题及提交答卷到数据库
-
手把手教你搭建答题活动小程序系列，第一阶段为界面设计篇，分别描写了如何搭建答题小程序界面。第二阶段为功能交互篇。而上两篇文章分别描写了，如何用云开发实现查询题库功能，以及将获取到的题目数据动态更新到答...
- 你还在使用Guava的Lists.newArrayList()吗
-
Guava说起Guava，做Java开发的应该没人不知道吧，毕竟“google出品，必属精品”。虽然应该没有Spring那样让Javaer无法避开，但是其中很多工具类的封装还是让人欲罢不能。而我们今天...
- Mybatis参数传递
-
1.概述Mybatis的sql参数传递就是将接口方法中定义的参数传输到sql中。sql有两种形式，一种是XML格式（Mapper映射器）中的sql；一种是注解方式的sql。常用参数的类型主要包括：基...
- python中的map和filter避坑指南
-
Pythonic的方式使用map和filter列表迭代在python中是非常pythonic的使用方式definc(x):returnx+1>>>list(map...
- 2025 年 Object 和 Map 如何选择?
-
大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。1.什么是...
- 如何使用Java读取Excel文件到List>格式
-
引言在开发过程中，我们经常会遇到需要读取Excel文件并将数据转换成Java对象的需求。ApachePOI是一个强大的库，它提供了读取和写入MicrosoftOffice格式文件的功能，包括Exc...
- Nginx L4 stream Solution white list map
-
nginx正向透明代理nginx正向透明代理安全方面的一些限制对于代理而已，有时候可能还不够安全，而且这个是基于4层的，所以想要在http上，或者所谓的http头上做限制还是比较难实现了。所以变...
- Java响应式编程 第五篇 flatMap vs map
-
1作用不同1.2映射？展平？map只执行映射flatMap既执行映射，也执行展平什么叫只能执行映射？我理解是把一个数据执行一个方法，转换成另外一个数据。举个例子：mapper函数把输入的字符...
- Java对象拷贝原理剖析及最佳实践
-
作者：宁海翔1前言对象拷贝，是我们在开发过程中，绕不开的过程，既存在于Po、Dto、Do、Vo各个表现层数据的转换，也存在于系统交互如序列化、反序列化。Java对象拷贝分为深拷贝和浅拷贝，目前常用的...
- mybatis手把手教学，希望大家能拿下它
-
目录1.jdbc封装中的问题12.mybatis介绍43.框架搭建41）导包52）配置文件6配置dtd约束73）创建SqlSessionFactory对象94.入门案例91.部门实体...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- maven镜像 (69)
- undefined reference to (60)
- zip格式 (63)
- oracle over (62)
- date_format函数用法 (67)
- 在线代理服务器 (60)
- shell 字符串比较 (74)
- x509证书 (61)
- localhost (65)
- java.awt.headless (66)
- syn_sent (64)
- settings.xml (59)
- 弹出窗口 (56)
- applicationcontextaware (72)
- my.cnf (73)
- httpsession (62)
- pkcs7 (62)
- session cookie (63)
- java 生成uuid (58)
- could not initialize class (58)
- beanpropertyrowmapper (58)
- word空格下划线不显示 (73)
- jar文件 (60)
- jsp内置对象 (58)
- makefile编写规则 (58)