脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-Vuejs――（6）Vuejs与form元素，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

Vuejs——(6)Vuejs与form元素。

(二十三)表单绑定

①常见绑定方法：

【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不设valuevalue的值设为B默认选择这个，value设为C

{{select}}

同样，这里不注册也会被报错

——————————————

以下是select的多选，按住ctrl可以连续选，按住shift选择区间

abcDE

多选选中的值是：{{multiple}}

注意，这个多选select框是默认带y轴的滚动条的

——————————————

动态渲染，checkbox和多选select框是互相影响的

A

B

C

ABC

选中情况是：{{Dynamic}}

——————————————

选中和选中的值自定义的checkbox

true/false

different value: {{different}}

注意，以上不能像普通checkbox那么样，用一个数组作为多个checkbox的v-model的变量，且其值是绑定与vm实例的某个属性; 因此，不能在v-bind里的值是一个字符串，但可以是一个对象，例如{a:1}这样(当然，这个时候显示的值也是一个对象了)

——————————————

自定义之的radio

值为1 值为1

{{customize}}

同样，值可以是vm的一个属性或者是一个对象，另外，同样有效的还有select。(主要就这三个有选中状态，除此之外虽然例如Date类型也有选中，但是意义不大)

——————————————

②添加参数：

参数说明

lazy非实时更新，而是focus状态结束后更新

number将值自动转为number类型输出

debounce延迟若干毫秒再更新数值

【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等高消耗操作。

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-Vuejs――（6）Vuejs与form元素全部内容，希望文章能够帮你解决javascript代码实例教程-Vuejs――（6）Vuejs与form元素所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。