It can easily implement two-way data binding, so it has great advantages in processing forms and human-computer interaction. The following is a description of their specific implementation methods in HTML and using radio boxes, check boxes and drop-down boxes as examples.
1. Radio box
The method of implementing radio boxes in traditional HTML is as follows:
<div > <input type="radio" name="gender" value="man" /><label for="man">male</label> <input type="radio" name="gender" value="woman" /><label for="women">female</label> </div>
Note: The name attribute value must be the same here to ensure that only one can be selected at the same time. It is also used to identify the data sent to the server; the value value is also important, and when the button is selected, the value will be sent to the server;
It is more convenient to use the implementation of the single box, for example, below. We no longer need the name attribute. We just need to use the v-model directive to bind the same variable to each option to ensure that only one is selected at the same time. At the same time, the value attribute is still needed, indicating the value when selected.
<div >
<label>male<input type="radio" v-model="gender" value="man"/></label>
<label>female<input type="radio" v-model="gender" value="woman"/></label>
<p>Selected：{{gender}}</p><!--If using nativejsImplementing this function is troublesome-->
</div>
<script>
var app=new Vue({
el:'#app',
data:{
gender:''
}
});
</script>
2. Check box
The code to implement the checkbox in traditional HTML is as follows:
<div > <input type="checkbox" name="whom" value="jack" /><label for="Jack">jack</label> <input type="checkbox" name="whom" value="bob" /><label for="Bob">bob</label> <input type="checkbox" name="whom" value="alice" /><label for="Alice">alice</label> </div>
From the above code, we can see that the constructing method of radio and check boxes in HTML is similar, except that the type value becomes checkbox, and a checkbox and the selection situation is also used to represent a checkbox and the selected situation.
Constructing check boxes in is similar to radio boxes, except that each option box binds a variable with v-model. These variables are generally placed in an object, or a same attribute name is bound to v-model, and the attributes are arrays; for example, for these two situations:
Use v-model to bind a variable for each option box:
<div >
<label>jack<input type="checkbox" v-model=""/></label>
<label>bob<input type="checkbox" v-model=""/></label>
<label>alice <input type="checkbox" v-model=""/></label>
<p>Selected：{{person}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
person: {jack: false, bob: false, alice: false}
}
})
</script>
From the above code, we can see that the value attribute is no longer needed here. The value bound for each attribute is of boolean type. When selected, the value becomes true, and false is not selected;
Bind a property of the same array type to v-model:
<div >
<label>jack<input type="checkbox" v-model="whom" value="jack"/></label>
<label>bob<input type="checkbox" v-model="whom" value="bob"/></label>
<label>alice <input type="checkbox" v-model="whom" value="alice"/></label>
<p>Selected：{{('|')}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
whom: []
}
})
</script>
From the code, you can see that: bind the same array name for each option. The value attribute is needed here. When selected, the corresponding value value will be added to the array. When unchecked, the corresponding value value in the array will be deleted.
3. Pull down box
The traditional code for constructing a drop-down box using HTML is as follows:
<select name="selected"> <option value="a">A</option> <option value="b">B</option> <option value="c">C</option> </select>
Where name is used to identify the data when sent to the server, and the value is the value sent to the server when selected. If value is omitted in option, the value sent to the server is the value between option tags.
The method of implementing the drop-down box using vue2.0 is as follows:
<div >
<select v-model="selected">
<option v-for="item in items" v-bind:value="">{{}}</option>
</select>
<span>Selected:{{selected}}</span>
</div>
<script src=""></script>
<script>
new Vue({
el:'#app',
data:{
items:[{text:'A',value:'a'},{text:'B',value:'b'},{text:'C',value:'c'}],
selected:''
}
});
</script>
As you can see from the code, use the v-for directive to avoid repeated writing of option tags, and at the same time use the v-bind directive to bind the value attribute. When an item is selected, the value of the option is assigned to the selected variable.
Whether it is html writing or vue implementation, if you need to implement the multiple selection drop-down box, you only need to write the multiple attribute in the select tag (at the same time, in vue, the selected variable is initialized into an empty array).
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.