Vue.JS入门教程之处理表单
本文实例为大家分享了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前端组件学习教程》，欢迎大家学习阅读。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
- 这篇文章主要为大家详细解析了BootStrap栅格系统、表单样式与按钮样式源码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-01-23
- artDialog是一个基于javascript编写的对话框组件，它拥有精致的界面与友好的接口。本文给大家介绍JS中artdialog弹出框控件之提交表单思路详解，对本文感兴趣的朋友一起学习吧...2016-04-19
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 为了网站的安全性，很多朋友都把密码设的比较复杂，但是如何密码不能明显示，不知道输的是对是错，为了安全起见可以把密码显示的，那么基于js代码如何实现的呢？下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示，需要的朋友参考下...2016-03-03
- v-for标签可以用来遍历数组，将数组的每一个值绑定到相应的视图元素中去，下面这篇文章主要给大家介绍了关于在Vue.js中轻松解决v-for执行出错的三个方案，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。...2017-06-15
vue.js页面加载执行created,mounted的先后顺序说明
这篇文章主要介绍了vue.js页面加载执行created,mounted的先后顺序说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-07- 本文主要对介绍利用Vue.js 的递归组件，实现了一个最基本的树形菜单。具有很好的参考价值，下面就跟着小编一起来看下吧...2017-01-09
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
这篇文章主要介绍了JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结，非常不错，具有参考借鉴价值，需要的朋友参考下吧...2017-06-15- 本篇文章主要介绍了详解前后端分离之VueJS前端，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 ...2017-05-27
- 这篇文章主要为大家详细介绍了Vue.js组件tabs实现选项卡切换效果的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-12-02
- 本篇文章主要介绍了vue2 中如何实现动态表单增删改查实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 ...2017-06-15
- 本文介绍在表单提交之前修改提交的值的方法，希望给需要的朋友一些帮助。...2016-04-17
- 对于单页应用，官方提供了vue-router进行路由跳转的处理，这篇文章主要给大家介绍了Vue.js实战之利用vue-router实现跳转页面的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。...2017-04-03
- 过滤器，本质上就是一个函数。其作用在于用户输入数据后，它能够进行处理，并返回一个数据结果。下面这篇文章主要给大家介绍了Vue.js中过滤器的相关资料,需要的朋友可以参考借鉴，一起来看看吧。...2017-01-26
基于Bootstrap实现Material Design风格表单插件 附源码下载
Jquery Material Form Plugin是一款基于Bootstrap的Material Design风格的jQuery表单插件。这篇文章主要介绍了基于Bootstrap的Material Design风格表单插件附源码下载，感兴趣的朋友参考下...2016-04-19- 这篇文章主要为大家详细介绍了vue.js表格分页示例，ajax异步加载数据...2016-10-20
- 本文主要介绍AngularJS表单的知识，这里整理了表单的基础知识和简单的示例代码，有需要的小伙伴可以参考下...2016-08-24
基于bootstrap插件实现autocomplete自动完成表单
这篇文章主要介绍了基于bootstrap插件实现autocomplete自动完成表单的相关资料，感兴趣的朋友可以参考一下...2016-05-09- 这篇文章主要介绍了vue.js实现h5机器人聊天测试版，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-07-16
- JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。本文给大家介绍javascript的表单与验证-非空验证，对javascript表单验证相关知识感兴趣的朋友一起学习吧...2016-03-22