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 相关文章推荐
jquery 弹出登录窗口实现代码
Dec 24 Javascript
js 连接数据库如何操作数据库中的数据
Nov 23 Javascript
JavaScript将数据转换成整数的方法
Jan 04 Javascript
通过遮罩层实现浮层DIV登录的js代码
Feb 07 Javascript
js拆分字符串并将分割的数据放到数组中的方法
May 06 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
Sep 15 Javascript
JavaScript脚本判断蜘蛛来源的方法
Sep 22 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
Dec 07 Javascript
使用clipboard.js实现复制功能的示例代码
Oct 16 Javascript
微信小程序select下拉框实现效果
May 15 Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 Javascript
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
Mar 17 Javascript
微信小程序-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
DC这些乐高系列动画电影你看过几部?
2020/04/09 欧美动漫
php array_pop()数组函数将数组最后一个单元弹出(出栈)
2011/07/12 PHP
PHP判断IP并转跳到相应城市分站的方法
2015/03/25 PHP
JQuery SELECT单选模拟jQuery.select.js
2009/11/12 Javascript
JavaScript的类型简单说明
2010/09/03 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
2012/12/21 Javascript
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
2014/06/05 Javascript
js重写alert控件(适合学习js的新手朋友)
2014/08/24 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
移动端界面的适配
2017/01/11 Javascript
bootstrap滚动监控器使用方法解析
2017/01/13 Javascript
select下拉框插件jquery.editable-select详解
2017/01/22 Javascript
如何正确理解javascript的模块化
2017/03/02 Javascript
深入解析js轮播插件核心代码的实现过程
2017/04/14 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
2018/05/29 Javascript
H5实现手机拍照和选择上传功能
2019/12/18 Javascript
python使用自定义user-agent抓取网页的方法
2015/04/15 Python
python实现爬虫下载美女图片
2015/07/14 Python
Python列表推导式、字典推导式与集合推导式用法实例分析
2018/02/07 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
Python 堆叠柱状图绘制方法
2019/07/29 Python
python ftplib模块使用代码实例
2019/12/31 Python
python 等差数列末项计算方式
2020/05/03 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
详解python的xlwings库读写excel操作总结
2021/02/26 Python
使用CSS3实现字体颜色渐变的实现
2020/08/10 HTML / CSS
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
移动端HTML5 input常见问题(小结)
2020/09/28 HTML / CSS
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
Lookfantastic美国/加拿大:英国知名美妆购物网站
2019/03/27 全球购物
企业演讲比赛主持词
2014/03/18 职场文书
品牌宣传方案
2014/03/21 职场文书
数据设计之权限的实现
2022/08/05 MySQL