v-model详解(程序员设定的变量绑定的到底是什么,value默认值到底是什么)

Source

后面过程太长了。。。。先说结论吧,程序员设定的变量绑定的是用户输入的信息,但用户输入的信息不一定与value值绑定。。。
在text类型中用户信息与value绑定,value与框中内容绑定。
在radio类型中只有设定了value值之后,用户信息与value值绑定,value值与设定值绑定。
在checkbox类型中只有设定了value值,用户信息数据类型设置为数组后,用户信息才与value值绑定,value值与设定值绑定。

v-model的作用:将表单中用户提交的信息程序员设定的变量进行绑定。(绑定后其中任意一个改变另一个随之改变)
v-model的使用方法:
在这里插入图片描述

那么问题来了,用户提交的信息到底是什么呢?
一般情况下我们默认用户提交的信息为value属性的值,接下来我们就来讨论一下是否用户提交的信息一定默认为value值不同类型表单中value属性的默认值是什么。
input标签text类型的用户信息与value默认值

如图所示用户信息与message2变量绑定了,我们未设value值(此时value值由默认的决定)
在这里插入图片描述
在这里插入图片描述
如上图所示虽未设value值,但value的值与框中内容相同,变量的值与框中类容相同。
也就是说,text类型下,用户信息默认为value值,value值默认为框中类容
input标签radio类型的用户信息与value默认值
如图所示用户信息与message2变量绑定了,我们未设value值(此时value值由默认的决定)
如图所示用户信息与message1变量绑定了,我们未设value值(此时value值由默认的决定)
在这里插入图片描述
如上图所示,value的值为on,用户信息的值为null。
也就是说,radio类型下,未给value赋值时,用户信息默认为null,value值默认为on
但若给value赋值之后呢?
在这里插入图片描述
此与上图区别在于给value设了值,为男
在这里插入图片描述
如上图所示,value的值为男,用户信息的值为男。
也就是说,radio类型下,给value赋值之后,用户信息默认为value,value值为设定值。。。
input标签checkbox类型的用户信息与value默认值
在这里插入图片描述
如图所示用户信息与message变量绑定了,我们未设value值(此时value值由默认的决定)
在这里插入图片描述
如图所示用户信息默认为true/false(是否勾选)与value不同,value值默认为on
但若给value设定值呢?
在这里插入图片描述
此与上图区别在于给value设了值,为“haha”
在这里插入图片描述
如图所示用户信息认为true/false(是否勾选)与value不同,value值为设定值。
但若设value值的同时将用户信息类型改为数组呢?
在这里插入图片描述
设value值为“haha”
在这里插入图片描述
将用户信息类型改为数组
在这里插入图片描述
如图所示用户信息为value值,value值为设定值。。。。。
综上
v-model的作用为将程序员设定的变量用户信息绑定,但用户信息不一定与value值绑定
在text类型中用户信息与value绑定,value与框中内容绑定。
在radio类型中,只有设定了value值之后,用户信息才与value值绑定,value值与设定值绑定。
在checkbox类型中,只有设定了value值,且用户信息数据类型设置为数组后,用户信息才与value值绑定,value值与设定值绑定。