Vue.JS入门教程之处理表单
本文实例为大家分享了Vue.JS表单处理的相关内容，供大家参考，具体内容如下
基本用法
<!DOCTYPEhtml>
<html>
<headlang="en">
<metacharset="UTF-8">
<title></title>
<scriptsrc="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>
</head>
<body>
<formid="demo">
<!--text-->
<p>
<inputtype="text"v-model="msg">
{{msg}}
</p>
<!--checkbox-->
<p>
<inputtype="checkbox"v-model="checked">
{{checked?"yes":"no"}}
</p>
<!--radiobuttons-->
<p>
<inputtype="radio"name="picked"value="one"v-model="picked">
<inputtype="radio"name="picked"value="two"v-model="picked">
{{picked}}
</p>
<!--select-->
<p>
<selectv-model="selected">
<option>one</option>
<option>two</option>
</select>
{{selected}}
</p>
<!--multipleselect-->
<p>
<selectv-model="multiSelect"multiple>
<option>one</option>
<option>two</option>
<option>three</option>
</select>
{{multiSelect}}
</p>
<p><pre>data:{{$data|json2}}</pre></p>
</form>
<script>
newVue({
el:'#demo',
data:{
msg:'hi!',
checked:true,
picked:'one',
selected:'two',
multiSelect:['one','three']
}
});
</script>
</body>
</html>
惰性更新
默认情况下，v-model会在每个input事件之后同步输入的数据。你可以添加一个lazy特性，将其改变为在change事件之后才进行同步。
<!--在"change"而不是"input"事件触发后进行同步--> <inputv-model="msg"lazy>
转换为数字
如果你希望将用户的输入自动转换为数字，你可以在v-model所在的input上添加一个number特性。没有试验成功，不知道什么原因
<inputv-model="age"number>
绑定表达式
当使用v-model在单选框和复选框时，被绑定的值可以是布尔值或字符串：
<!--toggle是true或false--> <inputtype="checkbox"v-model="toggle"> <!--当单选框被选中时pick是"red"--> <inputtype="radio"v-model="pick"value="red">
这里有一点小的局限性——有的时候我们想把背后的值绑定到一些别的东西上。你可以按下面这个例子实现：
1.复选框
<inputtype="checkbox"v-model="toggle"true-exp="a"false-exp="b"> //被选中时： vm.toggle===vm.a //被取消选中时： vm.toggle===vm.b
2.单选框
<inputtype="radio"v-model="pick"exp="a"> //被选中时： vm.pick===vm.a
动态select选项
当你需要为一个<select>元素动态渲染列表选项时，推荐将options特性和v-model指令配合使用，这样当选项动态改变时，v-model会正确地同步：
<selectv-model="selected"options="myOptions"></select>
在你的数据里，myOptions应该是一个指向选项数组的路径或是表达式。
这个可选的数组可以包含简单的数组：
options=['a','b','c']
或者可以包含格式如{text:'',value:''}的对象。该对象格式允许你设置可选项，让文本展示不同于背后的值：
options=[
{text:'A',value:'a'},
{text:'B',value:'b'}
]
会被渲染成为
<select> <optionvalue="a">A</option> <optionvalue="b">B</option> </select>
1.选项组
另外，数组里对象的格式也可以是{label:'',options:[...]}。这样的数据会被渲染成为一个<optgroup>：
[
{label:'A',options:['a','b']},
{label:'B',options:['c','d']}
]
<select>
<optgrouplabel="A">
<optionvalue="a">a</option>
<optionvalue="b">b</option>
</optgroup>
<optgrouplabel="B">
<optionvalue="c">c</option>
<optionvalue="d">d</option>
</optgroup>
</select>
2.选项过滤
你的原始数据很有可能不是这里所要求的格式，因此在动态生成选项时必须进行一些数据转换。为了简化这种转换，options特性支持过滤器。将数据的转换逻辑做成一个可复用的自定义过滤器通常来说是个好主意：
Vue.filter('extract',function(value,keyToExtract){
returnvalue.map(function(item){
returnitem[keyToExtract]
})
})
<select
v-model="selectedUser"
options="users|extract'name'">
</select>
上述过滤器将像[{name:'Bruce'},{name:'Chuck'}]这样的原始数据转化为['Bruce','Chuck']，从而符合动态选项的格式要求。
3.静态默认选项
除了动态生成的选项之外，你还可以提供一个静态的默认选项：
<selectv-model="selectedUser"options="users"> <optionvalue="">Selectauser...</option> </select>
基于users动态生成的选项将会被添加到这个静态选项后面。如果v-model的绑定值为除0之外的伪值，则会自动选中该默认选项。
输入debounce
在一次输入被同步到模型之前，debounce特性允许你设置一个每次用户事件后的等待延迟。如果在这个延迟到期之前用户再次输入，则不会立刻触发更新，而是重置延迟的等待时间。当每次更新前你要执行繁重作业时会很有用，例如一个基于ajax的自动补全功能。有效的减少重复无用的提交
<inputv-model="msg"debounce="500">
注意debounce参数并不对用户的输入事件进行debounce：它只对底层数据的“写入”操作起作用。因此当使用debounce时，你应该用vm.$watch()而不是v-on来响应数据变化。
本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。