Section 2: Instructions (2)

1. V-else must be used with V-If or V-show to act as Else.

<Div id = "example"> <p v-If = "OK"> men </P> <p v-else = "OK"> Women </P> </ div>
<SCRIPT>
New vue ({
El: "# example ",
Data :{
OK: ture
}
});

</SCRIPT>

2. V-model is used to create bidirectional data binding on form tag controls such as input, select, text, checkbox, and radio.

 

<Form> name: <input type = "text" V-model = "data. name "Placeholder =" "/> <br/> Gender: <input type =" radio "id =" man "value =" one "V-model =" data. sex "/> <lable for =" man "> male </lable> <input type =" radio "id =" male "value =" two "V-model =" Data. sex "/> <lable for =" male "> female </lable> <input type =" radio "id =" Noman "value =" three "V-model =" Data. sex "/> <lable for =" Noman "> privacy </lable> <br/> interest: <input type = "checkbox" id = "book" value = "book" V-model = "data. interest "/> <label for =" book "> Read </label> <input type =" checkbox "id =" swim "value =" swim "V-model =" Data. interest "/> <label for =" swim "> swimming </label> <input type =" checkbox "id =" game "value =" game "V-model =" Data. interest "/> <label for =" game "> game </label> <input type =" checkbox "id =" song "value =" song "V-model =" Data. interest "/> <label for =" song "> singing </label> <br/> identity: <select V-model =" data. identity "> <option value =" teacher "> instructor </option> <option value =" doctor "> doctor </option> <option value =" lawyer "> attorney </ option> </SELECT>
</Form>

<SCRIPT>

　　new Vue({
　　　　el:"#example",
　　　　data:{
　　　　　　data:{
　　　　　　　　name:"1",
　　　　　　　　sex:"one",
　　　　　　　　interest:["book","song"],
　　　　　　　　identity:"teacher"
　　　　　　}
　　　　}

　　});
</script>

 

Note: When the Form Control assigns a default value, if you want:<Input type = "checkbox" id = "book" value = "book" V-model = "data. Interest" selected/>

You must also have the "book" value in data. Interest. The default values of tags in HTML must be the default values in the Vue template, because the V-model performs bidirectional data binding.

3,You can add multiple parameters to the V-model: Number, lazy, and debounce.

• Number automatically converts the value entered by the user to the number type. If the original value is Nan, the original value is returned.
• Lazy changes the input data to the change event. If it is not added, the change is synchronized by default.
• Debounce sets the minimum latency for Data Synchronization when the user inputs data. (For example, sending Ajax requests at any time .)

 

Section 2: Instructions (2)