Vue.JS入门教程之处理表单


Posted in Javascript onDecember 01, 2016

本文实例为大家分享了Vue.JS表单处理的相关内容,供大家参考,具体内容如下

基本用法

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>
</head>
<body>
<form id="demo">
 <!-- text -->
 <p>
  <input type="text" v-model="msg">
  {{msg}}
 </p>
 <!-- checkbox -->
 <p>
  <input type="checkbox" v-model="checked">
  {{checked ? "yes" : "no"}}
 </p>
 <!-- radio buttons -->
 <p>
  <input type="radio" name="picked" value="one" v-model="picked">
  <input type="radio" name="picked" value="two" v-model="picked">
  {{picked}}
 </p>
 <!-- select -->
 <p>
  <select v-model="selected">
   <option>one</option>
   <option>two</option>
  </select>
  {{selected}}
 </p>
 <!-- multiple select -->
 <p>
  <select v-model="multiSelect" multiple>
   <option>one</option>
   <option>two</option>
   <option>three</option>
  </select>
  {{multiSelect}}
 </p>
 <p><pre>data: {{$data | json 2}}</pre></p>
</form>
<script>
 new Vue({
  el: '#demo',
  data: {
   msg  : 'hi!',
   checked : true,
   picked : 'one',
   selected : 'two',
   multiSelect: ['one', 'three']
  }
 });

</script>
</body>
</html>

惰性更新
默认情况下,v-model 会在每个 input 事件之后同步输入的数据。你可以添加一个 lazy 特性,将其改变为在 change 事件之后才进行同步。

<!-- 在 "change" 而不是 "input" 事件触发后进行同步 -->
<input v-model="msg" lazy>

转换为数字
如果你希望将用户的输入自动转换为数字,你可以在 v-model 所在的 input 上添加一个 number 特性。没有试验成功,不知道什么原因

<input v-model="age" number>

绑定表达式
当使用 v-model 在单选框和复选框时,被绑定的值可以是布尔值或字符串:

<!-- toggle 是 true 或 false -->
<input type="checkbox" v-model="toggle">

<!-- 当单选框被选中时 pick 是 "red" -->
<input type="radio" v-model="pick" value="red">

这里有一点小的局限性——有的时候我们想把背后的值绑定到一些别的东西上。你可以按下面这个例子实现:

1.复选框

<input type="checkbox" v-model="toggle" true-exp="a" false-exp="b">
// 被选中时:
vm.toggle === vm.a
// 被取消选中时:
vm.toggle === vm.b

2.单选框

<input type="radio" v-model="pick" exp="a">
// 被选中时:
vm.pick === vm.a

动态select选项
当你需要为一个 <select> 元素动态渲染列表选项时,推荐将 options 特性和 v-model 指令配合使用,这样当选项动态改变时,v-model 会正确地同步:

<select v-model="selected" options="myOptions"></select>

在你的数据里,myOptions 应该是一个指向选项数组的路径或是表达式。
这个可选的数组可以包含简单的数组:

options = ['a', 'b', 'c']

或者可以包含格式如 {text:'', value:''} 的对象。该对象格式允许你设置可选项,让文本展示不同于背后的值:

options = [
 { text: 'A', value: 'a' },
 { text: 'B', value: 'b' }
]

会被渲染成为

<select>
 <option value="a">A</option>
 <option value="b">B</option>
</select>

1.选项组
另外,数组里对象的格式也可以是 {label:'', options:[...]}。这样的数据会被渲染成为一个 <optgroup>:

[
{ label: 'A', options: ['a', 'b']},
{ label: 'B', options: ['c', 'd']}
]
<select>
<optgroup label="A">
 <option value="a">a</option>
 <option value="b">b</option>
</optgroup>
<optgroup label="B">
 <option value="c">c</option>
 <option value="d">d</option>
</optgroup>
</select>

2.选项过滤
你的原始数据很有可能不是这里所要求的格式,因此在动态生成选项时必须进行一些数据转换。为了简化这种转换,options特性支持过滤器。将数据的转换逻辑做成一个可复用的 自定义过滤器 通常来说是个好主意:

Vue.filter('extract', function (value, keyToExtract) {
return value.map(function (item) {
 return item[keyToExtract]
})
})
<select
v-model="selectedUser"
options="users | extract 'name'">
</select>

上述过滤器将像 [{ name: 'Bruce' }, { name: 'Chuck' }] 这样的原始数据转化为 ['Bruce', 'Chuck'],从而符合动态选项的格式要求。

3.静态默认选项
除了动态生成的选项之外,你还可以提供一个静态的默认选项:

<select v-model="selectedUser" options="users">
<option value="">Select a user...</option>
</select>

基于 users 动态生成的选项将会被添加到这个静态选项后面。如果 v-model 的绑定值为除 0 之外的伪值,则会自动选中该默认选项。

输入debounce
在一次输入被同步到模型之前,debounce 特性允许你设置一个每次用户事件后的等待延迟。如果在这个延迟到期之前用户再次输入,则不会立刻触发更新,而是重置延迟的等待时间。当每次更新前你要执行繁重作业时会很有用,例如一个基于 ajax 的自动补全功能。有效的减少重复无用的提交

<input v-model="msg" debounce="500">
注意 debounce 参数并不对用户的输入事件进行 debounce:它只对底层数据的 “写入” 操作起作用。因此当使用 debounce 时,你应该用 vm.$watch() 而不是 v-on 来响应数据变化。

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于JS判断图片是否加载完成且获取图片宽度的方法
Apr 09 Javascript
jquery操作 iframe的方法
Dec 03 Javascript
javascript数组去重的方法汇总
Apr 14 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
Sep 26 Javascript
js实现表单多按钮提交action的处理方法
Oct 24 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
Sep 02 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
javascript实现简易计算器
Feb 01 Javascript
JS拉起或下载app的实现代码
Feb 22 Javascript
详谈构造函数加括号与不加括号的区别
Oct 26 Javascript
微信小程序封装的HTTP请求示例【附升级版】
May 11 Javascript
利用js获取下拉框中所选的值
Dec 01 #Javascript
js微信扫描二维码登录网站技术原理
Dec 01 #Javascript
Bootstrap的class样式小结
Dec 01 #Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 #Javascript
AngularJS中的JSONP实例解析
Dec 01 #Javascript
JavaScript交换两个变量值的七种解决方案
Dec 01 #Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
Dec 01 #Javascript
You might like
星际争霸兵种名称对照表
2020/03/04 星际争霸
发布一个迷你php+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
PHP strtotime函数详解
2009/12/18 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
2013/06/17 Javascript
jQuery中prepend()方法用法实例
2014/12/25 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
2015/07/31 Javascript
很棒的js Tab选项卡切换效果
2016/08/30 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
JavaScript数组迭代方法
2017/03/03 Javascript
js编写选项卡效果
2017/05/23 Javascript
浅析vue中常见循环遍历指令的使用 v-for
2018/04/18 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
Vue实现购物车详情页面的方法
2019/08/20 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
2019/11/09 Javascript
通过javascript实现扫雷游戏代码实例
2020/02/09 Javascript
如何使用 vue-cli 创建模板项目
2020/11/19 Vue.js
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
python获取指定网页上所有超链接的方法
2015/04/04 Python
Python实现配置文件备份的方法
2015/07/30 Python
Python工程师面试题 与Python Web相关
2016/01/14 Python
python操作mysql代码总结
2018/06/01 Python
详解django中url路由配置及渲染方式
2019/02/25 Python
pandas DataFrame运算的实现
2020/06/14 Python
乌克兰数字设备、配件和智能技术的连锁商店:KTC
2020/08/18 全球购物
英国哈罗德园艺:Harrod Horticultural
2020/03/31 全球购物
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
如何设置Java的运行环境
2013/04/05 面试题
生产经理的自我评价分享
2013/11/07 职场文书
应用数学专业求职信
2014/03/14 职场文书
反腐倡廉标语
2014/06/24 职场文书
流动人口婚育证明
2014/10/19 职场文书
2015年人力资源部工作总结
2015/04/30 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
微信小程序用户授权最佳实践指南
2021/05/08 Javascript