Vuejs第六篇之Vuejs与form元素实例解析

本文是小编结合官方文档整理的一篇细致代码更多更全的详细教程，非常适合新手学习，感兴趣的朋友一起看看吧！

资料来于官方文档：

http://cn.vuejs.org/guide/forms.html

表单绑定

①常见绑定方法：

【1】文本输入框绑定；

【2】textarea绑定（类似【1】）；

【3】radio选中值绑定；

【4】checkbox绑定（自动捆绑数组，无需name）；

【5】select绑定；

【6】select multiple多选选中框绑定；

【7】动态绑定（以上不同类型但同一个值可以互动）；

【8】checkbox选中和未选中赋予不同的值（主要是针对不选中状态）；

【9】checkbox，radio，select选中状态的值动态绑定（主要是指值动态绑定对象或者是vm实例的属性，例如data里的某个属性，或者是computed的某个值）；

如代码：

 
 
{{text}}
 
――――――――――――――
 
 
{{textarea}}
 
――――――――――――――
 
左边选中右边则为true：{{checkbox}} 
――――――――――――――
 
firstCheckbox
 
secondCheckbox
 
thirdCheckbox
 
以上选中的value情况为：{{checkboxes}}
 
以上选中的value情况为（以json格式显示，这里使用了json过滤器）：{{checkboxes|json}}
 
――――――――――――――
 
value = A
 
value = B
 
{{radio}}
 
注意，这里的v-model的值应该被注册到data里面，否则会红字警告（事实上，所有的都应该也这么做）
 
――――――――――――――
 
 
默认值，option不设value 
value的值设为B 
默认选择这个，value设为C 
 
{{select}}
 
同样，这里不注册也会被报错
 
――――――――――――――
 
以下是select的多选，按住ctrl可以连续选，按住shift选择区间
 
 
A 
B 
C 
D 
E 
 
多选选中的值是：{{multiple}}
 
注意，这个多选select框是默认带y轴的滚动条的
 
――――――――――――――
 
动态渲染，checkbox和多选select框是互相影响的
 
A
 
B
 
C
 
 
A 
B 
C 
 
选中情况是：{{Dynamic}}
 
――――――――――――――
 
选中和选中的值自定义的checkbox
 
true/false
 
different value: {{different}}
 
注意，以上不能像普通checkbox那么样，用一个数组作为多个checkbox的v-model的变量，且其值是绑定与vm实例的某个属性； 
因此，不能在v-bind里的值是一个字符串，但可以是一个对象，例如{a:1}这样（当然，这个时候显示的值也是一个对象了） 
 
――――――――――――――
 
自定义之的radio
 
值为1 
值为1 
{{customize}}
 
同样，值可以是vm的一个属性或者是一个对象，另外，同样有效的还有select。（主要就这三个有选中状态，除此之外虽然例如Date类型也有选中，但是意义不大）
 
――――――――――――――
 
 

②添加参数：

【1】lazy

在取消focus状态后才更新值，而不是按键按下时就更新值。

对文本输入框和textarea都有效

如代码：

 
{{text}}

【2】number

将输入的值自动转为number类型，如果转后为NaN类型，则返回原值；

如代码：

 
{{text}}
 
{{typeof text}}

如果加上number这个参数，那么输入数字时，则提示类型为string，加上之后，纯数字会提示number类型；

【3】debounce=”毫秒数”

当值连续若干毫秒没有变化时，触发变量的值的改变；

如代码：

 
{{text}}

当我以500ms的时间差依次输入1,2,3,4,5,6这六个数字时，text的值不会被更新；

当我停止输入有1000ms时，text值才会被更新；

因此，适合类似ajax等高消耗操作。

以上所述是小编给大家介绍的Vuejs第六篇之Vuejs与form元素实例解析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！