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 相关文章推荐
IE8 原生JSON支持
Apr 13 Javascript
使用js获取QueryString的方法小结
Feb 28 Javascript
编写Js代码要注意的几条规则
Sep 10 Javascript
javascript中关于break,continue的特殊用法与介绍
May 24 Javascript
AngularJS 如何在控制台进行错误调试
Jun 07 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
脚本div实现拖放功能(两种)
Feb 13 Javascript
Vue中this.$router.push参数获取方法
Feb 27 Javascript
js实现导航跟随效果
Nov 17 Javascript
vue基于viewer实现的图片查看器功能
Apr 12 Javascript
详解vue的数据劫持以及操作数组的坑
Apr 18 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
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
Wordpress php 分页代码
2009/10/21 PHP
深入php self与$this的详解
2013/06/08 PHP
php中\r \r\n \t的区别示例介绍
2014/02/08 PHP
php实现的ping端口函数实例
2014/11/12 PHP
PHP框架Laravel学习心得体会
2015/10/28 PHP
PHPExcel在linux环境下导出报500错误的解决方法
2017/01/26 PHP
全面解析PHP面向对象的三大特征
2017/06/10 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
JQuery获取表格数据示例代码
2014/05/26 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
AngularJS路由实现页面跳转实例
2017/03/03 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
layui问题之模拟select点击事件的实例讲解
2018/08/15 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
微信小程序云开发 搭建一个管理小程序
2019/05/17 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
python pytest进阶之fixture详解
2019/06/27 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
卡西欧B级产品官方网站:Casio Outlet
2018/05/22 全球购物
Android面试宝典
2013/08/06 面试题
运动会广播稿100字
2014/09/14 职场文书
《绝招》教学反思
2016/02/20 职场文书