Example sharing of how vue.js implements radio buttons, check boxes and drop-down boxes

This article mainly introduces the examples of radio button, check box and drop-down box implemented by vue.js. It has certain reference value. Interested friends can refer to it

Vue.js can It is very convenient to realize two-way data binding, so it has great advantages in form processing and human-computer interaction. The following uses radio buttons, check boxes and drop-down boxes as examples to introduce their specific implementation in HTML and Vue.js.

1. Radio button

The method to implement the radio button box in traditional HTML is as follows:

<p id="app"> 
 <input type="radio" name="gender" value="man" id="man"/><label for="man">男</label> 
 <input type="radio" name="gender" value="woman" id="women"/><label for="women">女</label> 
</p>

Note: The name attribute values ​​here must be the same 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 very important. When the button is selected, the value will be sent to the server;

It is more convenient to use vue.js to implement the radio button box. For example, as follows. We no longer need the name attribute. We only 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 to indicate the value when selected.

<p id="app"> 
 <label>男<input type="radio" v-model="gender" value="man"/></label> 
 <label>女<input type="radio" v-model="gender" value="woman"/></label> 
 <p>已选：{{gender}}</p><!--如果用原生js实现此功能比较麻烦--> 
</p> 
<script> 
 var app=new Vue({ 
  el:&#39;#app&#39;, 
  data:{ 
   gender:&#39;&#39; 
  } 
 }); 
</script>

2. Check box

The code to implement the check box in traditional HTML is as follows ：

<p 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> 
</p>

As you can see from the above code: the construction methods of radio button and check box in HTML are similar, except that the type value becomes checkbox, and name and value represents a checkbox and its selection.

Constructing check boxes in vue.js is similar to radio buttons, except that each option box is bound to a variable using v-model. These variables are generally placed in an object, or v- model binds a same attribute name, and the attribute is an array; examples for these two situations are as follows:

Use v-model to bind a variable to each option box:

<p 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>已选：{{person}}</p> 
</p> 
<script> 
 var app = new Vue({ 
  el: &#39;#app&#39;, 
  data: { 
   person: {jack: false, bob: false, alice: false} 
  } 
 }) 
</script>

As you can see from the above code: the value attribute is no longer needed here. The value bound to each attribute is of boolean type. When selected, the value becomes true, and when not selected, it becomes false;

Bind an attribute of the same array type to v-model:

<p 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>已选：{{whom.join(&#39;|&#39;)}}</p> 
</p> 
<script> 
 var app = new Vue({ 
  el: &#39;#app&#39;, 
  data: { 
   whom: [] 
 } 
 }) 
</script>

As you can see from the code: Bind for each option A same array name, the value attribute is required here. When selected, the corresponding value will be added to the array. When deselected, the corresponding value in the array will be deleted.

3. Drop-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>

The name is used for data identification when sent to the server, and the value is the value sent to the server when selected. If value is omitted from option, the value sent to the server is the value between option tags.

The method to implement the drop-down box with vue2.0 is as follows:

<p id="app"> 
 <select v-model="selected"> 
  <option v-for="item in items" v-bind:value="item.value">{{item.text}}</option> 
 </select> 
 <span>已选:{{selected}}</span> 
</p> 
<script src="vue.js"></script> 
<script> 
 new Vue({ 
  el:&#39;#app&#39;, 
  data:{ 
   items:[{text:&#39;A&#39;,value:&#39;a&#39;},{text:&#39;B&#39;,value:&#39;b&#39;},{text:&#39;C&#39;,value:&#39;c&#39;}], 
   selected:&#39;&#39; 
  } 
 }); 
</script>

As you can see from the code, use the v-for instruction to avoid Repeat the option tag and bind the value attribute with the v-bind directive. When an item is selected, the value of the option is assigned to the selected variable.

Whether it is written in HTML or implemented in Vue, if you need to implement a multi-select 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 to an empty array).

The above is the detailed content of Example sharing of how vue.js implements radio buttons, check boxes and drop-down boxes. For more information, please follow other related articles on the PHP Chinese website!