Vue.js为开发人员提供了很多方便的指令，其中v-model常用于表单的数据绑定。

以下是最常见的例子：

div id=' myapp ' input type=' text ' v-model=' msg ' br { { msg } }/div js中的数据初始化数据

脚本src=' http:/js/vue . js '/script script type=' text/JavaScript ' new vue({ El : ' # myapp '，data () {return {msg3360' hello'})，浏览器呈现：

从上面可以看出，v-model对应的数据是输入的值属性

但是如果是复选框，就会有一点问题

div id=' myapp ' input type=' checkbox ' v-model=' msg ' br { { msg } }/div不设置复选框的value属性

在js中，数据是“”:

Newvue ({el:' # myapp '，data () {return {msg:''}})，浏览器呈现：

选中为真，取消选中为假

如果数据中的消息被初始化为真，则默认情况下会选中复选框

在这里，人们将在复选框中有真或假的值，这似乎与选中的属性有关

对不对？我们再举一个例子：

div id='myApp '输入类型='checkbox' v-model='msg '值='angular'angularbrinput类型='checkbox' v-model='msg '值=' react 'reactbrinput类型='checkbox' V-model=' msg '值=' vue' vuebr {{msg}}/div我们设置了三个复选框并分别设置了值属性

还在js

Newvue ({el:' # myapp '，data () {return {msg:''}})，浏览器：

可以看出，有了value属性，v-model对应的msg仍然为真或假；

那么之前的猜测正确吗？

让我们稍微改变一下代码。通常，v-model对应字符串。这次我们将其初始化为空数组[]

Data() {return {msg:[]}}，其他东西不变，仍然是上面三个复选框

神奇的一幕出现了

在浏览器中：

如您所见，无论谁被选中，其值都将被添加到数组中。

并且数据是双向绑定的，所以当我们在初始化数据数组中给出上述值时，默认情况下会选中相应的复选框

data(){ return { msg :[' vue ']} }，

浏览器呈现：

因此，我们可以看到checkbox中v-model对应的值仍然是值，但是为什么之前是真的还是假的呢？

我在网上搜索了很久，也没有找到特别明确的解释，所以在这里表达一下我的理解：

1.checkbox与普通输入相同。点击勾选实际上就是输入值，输入值会改变勾选的属性，所以会被选中。当v-model对应于“字符串”时，它会将“字符串”解析为布尔值，如果v-model对应于值或true，则会选中复选框。

2.当v-model对应“数组”时，打勾表示已经选中，相当于赋值给，相当于有值，没有值属性时，打勾相当于赋值(' null ')给value——v-model('null '为字符串)；当有值属性时，打勾相当于给value——v-model赋值(value)。请注意，数据是双向绑定的，因此数组中的值对应于value——v-model of checkbox。

3.在处理表单时，v-model通常是对应的字符串，所以处理checkbox的v-model，利用对应的布尔值来控制检查。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。