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 相关文章推荐
json格式的时间显示为正常年月日的方法
Sep 08 Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 Javascript
node.js使用cluster实现多进程
Mar 17 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
Oct 30 Javascript
DOM 事件的深入浅出(一)
Dec 05 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
Dec 24 Javascript
canvas实现流星雨的背景效果
Jan 13 Javascript
基于JS实现移动端左滑删除功能
Jul 28 Javascript
ReactJs实现树形结构的数据显示的组件的示例
Aug 18 Javascript
JavaScript实现一个简易的计算器实例代码
May 10 Javascript
VuePress 中如何增加用户登录功能
Nov 29 Javascript
基于vue中的scoped坑点解说
Sep 04 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
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
php 操作符与控制结构
2012/03/07 PHP
php中将汉字转换成拼音的函数代码
2012/09/08 PHP
PHP中鲜为人知的10个函数
2014/02/28 PHP
php字符串过滤strip_tags()函数用法实例分析
2019/06/24 PHP
PHP FileSystem 文件系统常用api整理总结
2019/07/12 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
JavaScript 学习初步 入门教程
2010/03/25 Javascript
javascript实现TreeView 无刷新展开的实例代码
2013/07/13 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
2016/10/10 Javascript
基于js实现checkbox批量选中操作
2016/11/22 Javascript
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
2018/08/25 Javascript
jQuery事件多次绑定与解绑问题实例分析
2019/02/19 jQuery
详解使用uni-app开发微信小程序之登录模块
2019/05/09 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
python进行两个表格对比的方法
2018/06/27 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
Django-Scrapy生成后端json接口的方法示例
2020/10/06 Python
Python抖音快手代码舞(字符舞)的实现方法
2021/02/07 Python
python连接手机自动搜集蚂蚁森林能量的实现代码
2021/02/24 Python
马来西亚最大的在线隐形眼镜商店:MrLens
2019/03/27 全球购物
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
计算机求职自荐信范文
2014/04/19 职场文书
小学六年级学生评语
2014/04/22 职场文书
婚前保证书范文
2015/02/28 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS
七个Python必备的GUI库
2021/04/27 Python