Vue 数据双向绑定
1. 前言
本小节我们将介绍 Vue 中数据的双向绑定指令 v-model。v-model 的学习相对简单
我们可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
2. 解释
用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。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项目引入bootstrap、elementUI、echarts
- VUE - vue.runtime.esm.js?6e6d:619 [Vue warn]: Do not use built-in or reserved HTML elements as component i
- vue框架,数据展示和分析,报告管理界面
- [Vue + TS] Create Type-Safe Vue Directives in TypeScript
- vue.js3:element-plus使用例子:用滑块调节图片灰度(element-plus@2.2.2 / vue@3.2.36)
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- vue.js3: 使用全局css样式文件(vue@3.2.37)
- vue.js3:父组件子组件互相访问数据方法(vue@3.2.37)
- vue3.x:用webpack-bundle-analyzer分析chunk文件过大的原因(vue.js 3.0.5/@vue/cli 4.5.13)
- Atitit 项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx
- vue 的 render 函数的用法:new Vue({ render: h => h(App), }).$mount(‘#app‘)
- vue+echarts实现动态绘制图表及异步加载数据的方法
- Vue中的baseurl怎么配置
- vue-seamless-scroll 好用的无缝滚动插件
- vue element-ui 文件上传
- Vue.js:Vue-Router动态路由从服务器接口获取路由数据
- Vue学习之--------el与data的两种写法、MVVM模型、数据代理(2022/7/5)
- 234:vue+openlayers 加载本地shp数据,在map上显示图形
- 216:vue+openlayers 加载GPX数据,导出geojson文件
- 215:vue+openlayers 使用new WFS加载数据,通过like,and,equalTo来过滤数据
- 119:vue+openlayers加载geoserver的Tile caching中的数据(示例代码)
- 032:vue+openlayers加载CSV数据(代码示例)
- Vue 内联样式的数据绑定
- Vue(八)vue 脚手架、脚手架创建项目示例
- Vue(一)vue 概述与用法、MVVM、绑定语法、vue 指令
- vue中使用echarts实现动态数据绑定、获取后端接口数据
- Vue的基本组件4(ref)