vue表单数据绑定

vue表单数据绑定

v-model主要是用在表单元素中,它实现了双向绑定。双向绑定大家都比较熟悉,简单的说就是默认情况下,它对应实例当中的data.name,当data改变时v-model会同步改变,反之亦然,从而实现关联动态效果。

本周在网站项目中添加了几个带有数据交互的模态框,发现不同的表单元素的数据绑定各有其的特性,普通的输入表单用v-model绑定的就是输入的value值,但是其他的表单却不完全是这样,为了弄清楚这些差异,所以总结一下表单元素的双向数据绑定知识。

checkbox的基本用法:

如果v-model绑定的变量类型为boolean,若input被选中,this.inputdata为true,否则this.inputdata为false。

如果v-model绑定的变量类型为数组,那么绑定该变量的元素若被选中,把该元素的value值添加进数组,若不被选中,那么把该元素的value从数组中去除。

radio的基本用法:

v-model绑定的变量值如果等于input元素其中一个value值,那么该表单元素会被选中,如果不等于任何input的value值,所有相关元素不选中。同时如果选中某个input元素,那么该元素的value值就会被赋给该变量,页面重新渲染。

select的基本用法:

v-model绑定的变量值如果等于option元素其中一个value值,那么该元素会被选中。同时如果选中某个option元素,那么该元素的value值就会被赋给该变量。

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容