Vue.JS入门教程之处理表单

发布时间：2020-12-17 03:07:22 所属栏目：百科来源：网络整理

导读：本文实例为大家分享了Vue.JS表单处理的相关内容，供大家参考，具体内容如下基本用法 one two {{selected}} one two three {{multiSelect}} data: {{$data | json 2}} 惰性更新默认情况下，v-model 会在每个 input 事件之后同步输入的数据。你可以添加一个

本文实例为大家分享了Vue.JS表单处理的相关内容，供大家参考，具体内容如下

基本用法

惰性更新

默认情况下，v-model 会在每个 input 事件之后同步输入的数据。你可以添加一个 lazy 特性，将其改变为在 change 事件之后才进行同步。

转换为数字

如果你希望将用户的输入自动转换为数字，你可以在 v-model 所在的 input 上添加一个 number 特性。没有试验成功，不知道什么原因

绑定表达式

当使用 v-model 在单选框和复选框时，被绑定的值可以是布尔值或字符串：

这里有一点小的局限性——有的时候我们想把背后的值绑定到一些别的东西上。你可以按下面这个例子实现：

1.复选框

2.单选框

动态select选项

当你需要为一个

1.选项组另外，数组里对象的格式也可以是 {label:'',options:[...]}。这样的数据会被渲染成为一个：

2.选项过滤你的原始数据很有可能不是这里所要求的格式，因此在动态生成选项时必须进行一些数据转换。为了简化这种转换，options特性支持过滤器。将数据的转换逻辑做成一个可复用的自定义过滤器通常来说是个好主意：

上述过滤器将像 [{ name: 'Bruce' },{ name: 'Chuck' }] 这样的原始数据转化为 ['Bruce','Chuck']，从而符合动态选项的格式要求。

3.静态默认选项除了动态生成的选项之外，你还可以提供一个静态的默认选项：

基于 users 动态生成的选项将会被添加到这个静态选项后面。如果 v-model 的绑定值为除 0 之外的伪值，则会自动选中该默认选项。

输入debounce

在一次输入被同步到模型之前，debounce 特性允许你设置一个每次用户事件后的等待延迟。如果在这个延迟到期之前用户再次输入，则不会立刻触发更新，而是重置延迟的等待时间。当每次更新前你要执行繁重作业时会很有用，例如一个基于 ajax 的自动补全功能。