Vue.js Implement a Radio box, check box, and drop-down box

Vue.js can be easily implemented data bidirectional binding, so in the processing of forms, human-computer interaction has a great advantage. The following is an example of how they are implemented in HTML and vue.js, using a single box, check box, and drop-down boxes.

One, Radio boxThe way to implement a radio box in traditional HTML is as follows:

<div id= "App" >    <input type= "Radio" name= "Gender" value= "man" id= "Men"/><label for= "mans" > Male </ label>    <input type= "Radio" name= "Gender" value= "Woman" id= "women"/><label for= "Women" > Female </ Label></div>

Note: Here the Name property value must be the same to ensure that only one at a time can be selected. It is also used to identify the data sent to the server, and value value is important, when the button is selected, the value will be sent to the server, it is convenient to use Vue.js to implement the radio box, for example. We no longer need the Name property, just using the V-model directive to bind the same variable to each option ensures that only one is selected at the same time, and that the Value property is required, indicating the values when selected.

<div id= "App" >    <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 native JS to implement this feature is more troublesome--></div><script>    var app=new Vue ({        el: ' #app ',        data: {            gender: '        }    });</script>

Two, check boxImplement the check box code in the traditional HTML as follows:

<div id= "App" >    <input type= "checkbox" Name= "whom" value= "Jack" id= "Jack"/><label for= "Jack" > jack</label>    <input type= "checkbox" Name= "whom" value= "Bob" id= "Bob"/><label for= "Bob" >bob </label>    <input type= "checkbox" Name= "whom" Value= "Alice" Id= "Alice"/><label for= "Alice" > Alice</label></div>

As you can see from the code above: the Single box and check boxes in HTML are constructed similarly, except that the type value becomes a checkbox, and the name and value are also used to characterize a check box and select the case. The Construct check box in Vue.js is also similar to a radio box, except that each option box binds a variable with V-model, which is typically placed in an object, or binds an identical property name to the V-model, and the attribute is an array of the two cases, for example:
Use V-model to bind a variable for each option box:

<div id= "App" >    <label>jack<input type= "checkbox" v-model= "Person.jack    "/></label> <label>bob<input type= "checkbox" v-model= "Person.bob"/></label>    <label>alice < Input type= "checkbox" v-model= "Person.alice"/></label>    <p> selected:{{person}}</p></div> <script>    var app = new Vue ({        el: ' #app ',        data: {person            : {jack:false, Bob:false, alice:false}
   
    }}    ) </script>
   

As you can see from the above code: The Value property is not required here, the values bound for each property are of type Boolean, the value is true when it is selected, and false is not checked;
Bind a property of the same array type to V-model:

<div id= "App" >    <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: {{whom.join (' | ')}} </p></div><script>    var app = new Vue ({        el: ' #app ',        data: {            whom: []    }    }) </script>

As you can see from the code: Each option is bound to an identical array name, where the Value property is required, and when selected, the corresponding value value is added to the array, and when unchecked, the corresponding value value in the array is deleted.

Three, drop-down boxThe code for the traditional HTML construction drop-down box 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 for data recognition when it is sent to the server, value is sent to the server when selected. If value is omitted from option, the value sent to the server is the value between the option label.
Here's how to implement a drop-down box with vue2.0:

<div id= "App" >    <select v-model= "selected" >        <option v-for= "item in Items" V-bind:value= " Item.value ">{{item.text}}</option>    </select>    <span> selected:{{selected}}</span> </div><script src= "Vue.js" ></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 repeating the option tag and bind the Value property with the V-bind directive. When an item is selected, the value of the option is assigned to the selected variable.
Whether it's HTML writing or Vue implementation, if you need to implement a multi-select drop-down box, just write the multiple property in the Select tab (and in Vue, the selected variable is initialized to an empty array)

Vue.js Implement a Radio box, check box, and drop-down box