Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定


Posted in Javascript onApril 29, 2019

表单类控件承载了一个网页数据的录入与交互,本章将介绍如何使用指令v-model完成表单的数据双向绑定。

6.1 基本用法

表单控件在实际业务较为常见,比如单选、多选、下拉选择、输入框等,用它们可以完成数据的录入、校验、提交等。
Vue.js提供了v-model指令,用于在表单类元素上双向绑定数据,例如在输入框上使用时,输入的内容会实时映射到绑定的数据上。

 例如下面的例子:

<div id="app">
 <input type="text" v-model="message" placeholder="请输入...">
 <p>输入的内容是:{{message}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 message: ""
 }
 });
</script>

在输入框输入的同时,{{message}}也会实时将内容渲染在视图中。

 如图6-1所示:

Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定

对于文本域<textarea>也是同样的用法:

<div id="app">
 <textarea v-model="text" placeholder="请输入..."></textarea>
 <p>输入的内容是:</p>
 <p style="white-space: pre;">{{text}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 text: ""
 }
 });
</script>

提示:

  •  提示v-model后,表单控件显示的值只依赖所绑定的数据,不再关心初始化时的value属性,对于在<textarea></textarea>之间插入的值,也不会生效。
  •  使用v-model时,如果是用中文输入法输入中文,一般在没有选定词组前,也就是在拼音阶段,Vue是不会更新数据的,当敲下汉字时才会触发?新。
  •  如果希望总是实时更新,可以用@input来替代v-model。
  •  事实上,v-model也是一个特殊的语法糖,只不过它会在不同的表单上智能处理。
  •  例如下面的示例:
<div id="app">
 <input type="text" @input="handleInput" placeholder="请输入...">
 <p>输入的内容是:{{message}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 message: ""
 },
 methods: {
 handleInput: function(event) {
 this.message = event.target.value;
 }
 }
 });
</script>

来看看更多的表单控件。

单选按钮:

单选按钮在单独使用时,不需要v-model,直接使用v-bind绑定一个布尔类型的值,为true时选中,为false时不选。
 例如:

<div id="app">
 <input type="radio" :checked="picked">
 <label>单选按钮</label>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 picked: true
 }
 });
</script>

如果是组合使用来实现互斥选择的效果,就需要v-model配合value来使用:

<div id="app">
 <input type="radio" v-model="picked" value="html" id="html">
 <label for="html">HTML</label>
 
 <input type="radio" v-model="picked" value="js" id="js">
 <label for="js">JavaScript</label>
 
 <input type="radio" v-model="picked" value="css" id="css">
 <label for="css">CSS</label>
 
 <p>您选择的是:{{picked}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 picked: "js"
 }
 });
</script>

数据picked的值与表单按钮的value值一致时,就会选中该项,所以当前状态下选中的是第二项。
 如图6-2所示:

Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定

复选框:

复选框也分单独使用和组合使用,不过用法稍与单选不同。

 复选框单独使用时,也是用v-model来绑定一个布尔值。

 例如:

<div id="app">
 <input type="checkbox" v-model="checked" id="checked">
 <label for="checked">选择状态:{{checked}}</label>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 checked: false
 }
 });
</script>

在勾选时,数据checked的值改为了true,<label>中渲染的内容也会更新。

组合使用时,也是v-model与value一起,多个勾选框都绑定到同一个数组类型的数据,value的值在数据当中,就会选中这一项。

 这一过程也是双向的,在勾选时,value的值也会自动push到这个数组中。

 实例代码如下:

<div id="app">
 <input type="checkbox" v-model="checked" value="html" id="html">
 <label for="html">HTML</label>
 <br>
 <input type="checkbox" v-model="checked" value="js" id="js">
 <label for="js">JavaScript</label>
 <br>
 <input type="checkbox" v-model="checked" value="css" id="css">
 <label for="css">CSS</label>
 <br>
 <p>你选择的是:{{checked}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 checked: ["html", "css"]
 }
 });
</script>

当前状态下的结果如图6-3所示:

Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定

选择列表:

选择列表就是下拉选择器,也是常见的表单控件,同样也分为单选和多选两种方式。
 先看一下单选的示例代码:

<div id="app">
 <select v-model="selected">
 <option>html</option>
 <option value="js">JavaScript</option>
 <option>css</option>
 </select>
 <p>你选择的是:{{selected}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 selected: "html"
 }
 });
</script>

<option>是备选项,如果含有value属性,v-model就会优先匹配value的值; 

如果没有,就会直接匹配<option>的text。

 比如选中第二项时,selected的值为js,而不是JavaScript。

给<select>添加属性multiple就可以多选了,此时v-model绑定的是一个数组,与复选框用法类似。
 实例代码如下:

<div id="app">
 <select v-model="selected" multiple>
 <option>html</option>
 <option value="js">JavaScript</option>
 <option>css</option>
 </select>
 <p>你选择的是:{{selected}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 selected: ["html", "js"]
 }
 });
</script>

在业务中,<option>经常用v-for动态输出,value和text也是用v-bind来动态输出的。
 例如:

<div id="app">
 <select v-model="selected">
 <option v-for="item in options" :value="item.value">{{item.text}}</option>
 </select>
 <p>你选择的是:{{selected}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 options: [
 {text:"HTML", value:"html"},
 {text:"JavaScript", value:"js"},
 {text:"CSS", value:"css"},
 ],
 selected: "html"
 }
 });
</script>

虽然用选择列表<select>控件可以很简单地完成下拉选择的需求,但是在实际业务中反而不常用,因为它的样式依赖平台和浏览器,无法统一,也不太美观,功能也受限,,比如不支持搜索,所以常见的解决方案是用<div>moi一个类似的控件。

 当阅读完第7章组件的内容后,可以尝试编写一个下拉选择器的通用组件。

6.2 绑定值

上一节介绍的单选按钮、复选框和选择列表在单独使用或单选的模式下,v-model绑定的值是一个静态字符串或布尔值。
 但在业务中,有时需要绑定一个动态的数据,这时可以用v-bind来实现。

单选按钮:

<div id="app">
 <input type="radio" v-model="picked" :value="value">
 <label>单选按钮</label>
 <p>{{picked}}</p>
 <p>{{value}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 picked: false,
 value: 123
 }
 });
</script>

在选中时,app.picked===app.value,值都是123。

复选框:

<div id="app">
 <input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">
 <label>复选框</label>
 <p>{{toggle}}</p>
 <p>{{value1}}</p>
 <p>{{value2}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 toggle: false,
 value1: "a",
 value2: "b"
 }
 });
</script>

 勾选时,app.toggle===app.value1

 未勾选时,app.toggle===app.value2

选择列表:

<div id="app">
 <select v-model="selected">
 <option :value="{number:123}">123</option>
 </select>
 {{selected.number}}
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 selected: ""
 }
 });
</script>

 当选中时,app.selected是一个Object,所以app.selected.number===123

6.3 修饰符

与事件的修饰符类似,v-model也有修饰符,用于控制数据同步的时机。

.lazy:

在输入框中,v-model默认是在input事件中同步输入框的数据(除了提示中介绍的中文输入法情况外)。

 使用修饰符.lazy会转变为在change事件中同步,示例代码如下:

<div id="app">
 <input type="text" v-model.lazy="message">
 <p>{{message}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 message: ""
 }
 });
</script>

 这是,message并不是实时改变的,而是在失焦或按回车时才更新。

.number:

使用修饰符.number可以将输入转换为Number类型,否则虽然你输入的是数字,但它的类型其实是String。
 比如在数字输入框时会比较有用,示例代码如下:

<div id="app">
 <input type="number" v-model.number="message">
 <p>{{typeof message}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 message: 123
 }
 });
</script>

 .trim:

修饰符.trim可以自动过滤输入的首尾空格,示例代码如下:

<div id="app">
 <input type="text" v-model.trim="message">
 <p>{{message}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 message: ""
 }
 });
</script>

 从Vue.js 2.x开始,v-model还可以用于自定义组件,满足定制化的需求,在下一节会介绍。

以上所述是小编给大家介绍的Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
简明json介绍
Sep 28 Javascript
jQuery.ajax 用户登录验证代码
Oct 29 Javascript
javascript闭包传参和事件的循环绑定示例探讨
Apr 17 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
利用jqprint插件打印页面内容的实现方法
Jan 09 Javascript
vue-content-loader内容加载器的使用方法
Aug 05 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
Aug 09 Javascript
基于Vue和Element-Ui搭建项目的方法
Sep 06 Javascript
js前端如何写一个精确的倒计时代码
Oct 25 Javascript
解决vue项目,npm run build后,报路径错的问题
Aug 13 Javascript
openlayers实现地图测距测面
Sep 25 Javascript
Vue3中的Refs和Ref详情
Nov 11 Vue.js
微信小程序-form表单提交代码实例
Apr 29 #Javascript
vue在index.html中引入静态文件不生效问题及解决方法
Apr 29 #Javascript
微信小程序传值以及获取值方法的详解
Apr 29 #Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 #Javascript
详解JavaScript实现动态的轮播图效果
Apr 29 #Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
Apr 29 #Javascript
实现elementUI表单的全局验证的方法步骤
Apr 29 #Javascript
You might like
PHP将DateTime对象转化为友好时间显示的实现代码
2011/09/20 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
Angular中使用better-scroll插件的方法
2018/03/27 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
Python爬虫天气预报实例详解(小白入门)
2018/01/24 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
python tkinter canvas 显示图片的示例
2019/06/13 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
2019/12/13 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2020/11/22 Python
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
介绍一下sql server的安全性
2014/08/10 面试题
银行实习的自我鉴定
2013/12/10 职场文书
元旦联欢会主持词
2014/03/26 职场文书
新农村建设典型材料
2014/05/31 职场文书
工会积极分子个人总结
2015/03/03 职场文书
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python
PyTorch device与cuda.device用法
2022/04/03 Python