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 相关文章推荐
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
Mar 04 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
Jun 27 Javascript
js限制textarea每行输入字符串长度的代码
Oct 31 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
Sep 05 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
jQuery处理json数据返回数组和输出的方法
Mar 11 Javascript
基于jquery编写分页插件
Mar 07 Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 Javascript
Bootstrap表单制作代码
Mar 17 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
May 24 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
jquery实现上传文件进度条
Mar 26 jQuery
微信小程序-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
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
thinkPHP数据查询常用方法总结【select,find,getField,query】
2017/03/15 PHP
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
Javascript中各种trim的实现详细解析
2013/12/10 Javascript
整理Javascript事件响应学习笔记
2015/12/02 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
2016/01/23 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
为什么我们要做三份 Webpack 配置文件
2017/09/18 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
Nodejs中crypto模块的安全知识讲解
2018/01/03 NodeJs
es6基础学习之解构赋值
2018/12/10 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
JavaScript实现的拼图算法分析
2019/02/13 Javascript
VUE中setTimeout和setInterval自动销毁案例
2020/09/07 Javascript
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
[08:47]DOTA2每周TOP10 精彩击杀集锦vol.6
2014/06/25 DOTA
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
python匿名函数的使用方法解析
2019/10/10 Python
结合OpenCV与TensorFlow进行人脸识别的实现
2019/10/10 Python
flask框架渲染Jinja模板与传入模板变量操作详解
2020/01/25 Python
Pytorch 高效使用GPU的操作
2020/06/27 Python
python属于哪种语言
2020/08/16 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
Django2.1.7 查询数据返回json格式的实现
2020/12/29 Python
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
软件工程师岗位职责
2013/11/16 职场文书
饮料业务员岗位职责
2013/12/15 职场文书
40岁生日感言
2014/02/15 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
酒店节能减排方案
2014/05/26 职场文书
欢迎领导标语
2014/06/27 职场文书
乡领导班子四风问题对照检查材料
2014/09/25 职场文书
安全责任书
2015/01/29 职场文书
小区保洁员岗位职责
2015/04/10 职场文书
JavaScript继承的三种方法实例
2021/05/12 Javascript