首页 > 安全资讯 >

Vuejs——(6)Vuejs与form元素

17-09-25

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

相关文章
最新文章
热点推荐