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 相关文章推荐
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
Apr 01 Javascript
JavaScript mapreduce工作原理简析
Nov 25 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 Javascript
jquery操作checked属性以及disabled属性的多种方法
Jun 20 Javascript
js实现简易的单数字随机抽奖(0-9)
Mar 19 Javascript
JavaScript制作简单分页插件
Sep 11 Javascript
完美解决IE不支持Data.parse()的问题
Nov 24 Javascript
js实现右键自定义菜单
Dec 03 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 Javascript
JS复杂判断的更优雅写法代码详解
Nov 07 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
Nov 12 Javascript
js get和post请求实现代码解析
Feb 06 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
PHP分页显示制作详细讲解
2006/12/05 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
PHP反射实际应用示例
2019/04/03 PHP
laravel 实现根据字段不同值做不同查询
2019/10/23 PHP
写自已的js类库需要的核心代码
2012/07/16 Javascript
javascript实现的简单计时器
2015/07/19 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
Bootstrap3.0学习教程之JS折叠插件
2016/05/27 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
详解RequireJS按需加载样式文件
2017/04/12 Javascript
Easyui使用Dialog行内按钮布局的实例
2017/07/27 Javascript
bootstrap confirmation按钮提示组件使用详解
2017/08/22 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
2018/01/18 Javascript
用node开发并发布一个cli工具的方法步骤
2019/01/03 Javascript
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
Python自动调用IE打开某个网站的方法
2015/06/03 Python
详解python的四种内置数据结构
2019/03/19 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
Python如何解除一个装饰器
2020/08/07 Python
英国最受欢迎的价格比较网站之一:MoneySuperMarket
2018/12/19 全球购物
服务承诺书范文
2014/05/19 职场文书
党员教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
长城导游词300字
2015/01/30 职场文书
九寨沟导游词
2015/02/02 职场文书
好人好事新闻稿
2015/07/17 职场文书
优秀教师主要事迹材料
2015/11/04 职场文书
利用javaScript处理常用事件详解
2021/04/14 Javascript
Python字典和列表性能之间的比较
2021/06/07 Python
一文带你探究MySQL中的NULL
2021/11/11 MySQL
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang