Talking about the personal understanding of the CHECKBOX data binding V-Model directive

Vue.js provides developers with a lot of convenient instructions, where V-model is used for formal data binding,

The following is the most common example:


js in the js Data initialization data
New Vue ({EL: “#myApp”, data () {return {msg: ‘Hello’}},

    As can be seen, V-model corresponding to data is the value attribute of INPUT   However, if it is Checkbox, there will be a problem 



Did not set the value attribute to checkbox

JS Data is ”:

  New Vue ({EL: "#myApp ", DATA () {return {msg: ''}}, 


Cut True, unchecking to false

and DATA, if the MSG is initialized to True, checkbox is selected

When there is a value in CheckBox, V-model corresponds to true or false, which seems to be related to checkd attribute
, let's take another example:  


Vue 浅谈vue中关于checkbox数据绑定v-model指令的个人理解 {msg}}

We set up three Checkbox, set value attribute

New Vue ({EL: "# MyApp ", DATA () {return {msg: ''}},

You can see the Value property, the MSG corresponding to V-model is still true or false;

Is the previous guess?

Let’s change a little code, usually V-model corresponds to a string, this time we initialize an empty number []
data () {return { MSG: []}}}}}}}}}}}}
Other unchanged, still above three Checkbox

The magical scene is coming out

浅谈vue中关于checkbox数据绑定v-model指令的个人理解 browser: 浅谈vue中关于checkbox数据绑定v-model指令的个人理解 浅谈vue中关于checkbox数据绑定v-model指令的个人理解

As can be seen, the value of the value will be added to the array,

and the data is two-way binding ,, When we initialize the value value of the above, the corresponding checkbox will be selected by default

DATA () {Return {MSG: [‘Vue’]}},

   So, it can be seen that the value corresponding to the V-model in Checkbox remains Value, but why is True or False? ? 
I have been looking for a long time online. I didn’t find a special clear explanation, so I published my own understanding here:

1.checkbox and ordinary Input, click to check it is actually Enter value, and input value will change the check attribute, so select “string” as a Boolean value when V-Model corresponds to the “string”, V-model corresponds to true or true, checkbox will be selected.

2. When V-MODEL corresponds to the “array”, it is selected, which is equivalent to assignment, which is equivalent to Value, V-model, and does not have the value attribute, the order is equivalent to ‘null’) assignment to value -> v-model (‘null’ is a string), there is a value attribute, the point is equivalent to assigning the value to value -> V-model, pay attention to the data is bidirectional tied So, the value in the array corresponds to Checkbox’s value -> V-model. “

3. Processing form, V-model is generally corresponding to the string, so that checkbox’s V-model is handled, and use the corresponding Boolean control to check.

The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Cloud.

浅谈vue中关于checkbox数据绑定v-model指令的个人理解 浅谈vue中关于checkbox数据绑定v-model指令的个人理解

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment