Vuejs sixth Vuejs and Form element example Analysis _javascript skill

This article is a small series with official document collation of a detailed code more and more full details of the tutorial, very suitable for beginners to learn, interested friends to take a look at it!

Information to the official documents:

Http://cn.vuejs.org/guide/forms.html

Form Bindings

① Common binding methods:

"1" Text input box binding;

"2" textarea binding (similar to "1");

"3" Radio selected value binding;

"4" checkbox binding (Auto bundle array without name);

"5" Select binding;

"6" Select multiple a multiple-selection check box binding;

"7" Dynamic binding (the above different types but the same value can interact);

The "8" checkbox is selected and unchecked to give different values (mainly for the unchecked state);

"9" Checkbox,radio,select the value of the selected state is dynamically bound (mainly refers to the value of dynamically bound objects or the properties of a VM instance, such as a property in data, or a value of computed);

such as code:

<div id= "App" > <input type= "text" v-model= "text"/> <div>{{text}}</div> <div> —————————— ———— </div> <textarea style= "width:200px;height:100px" v-model= "textarea" ></textarea> <div >{{textarea}}</div> <div> —————————————— </div> <label><input type= "checkbox" v-model= CheckBox/> Left selected to the right true:{{checkbox}}</label> <div> —————————————— </div> <label>< Input type= "checkbox" value= "FirstCheckBox" v-model= "checkboxes" >firstCheckbox</label><br/> < Label><input type= "checkbox" value= "SecondCheckBox" v-model= "checkboxes" >secondCheckbox</label> <br/> <label><input type= "checkbox" value= "Thirdcheckbox" v-model= "checkboxes" >thirdCheckbox< /label><br/> <div> above selected value is:{{checkboxes}}</div> <div> above selected value is (shown in JSON format, The JSON filter is used here):{{checkboxes|json}}</div> <div> —————————————— </div> <lAbel><input type= "Radio" value= "A" v-model= "Radio"/>value = a</label><br> <label>< Input type= "Radio" value= "B" v-model= "Radio"/>value = b</label><br> <div>{{radio}}</div> & 
Lt;div> Note that the value of the V-model here should be registered in data, otherwise the red Word warning (in fact, all should do the same) </div> <div> —————————————— </div> <select v-model= "Select" > <option> default value, option does not set value</option> <option value= "B" >value is set to B </option> <option selected value= "C" > Default Select this, value set to C</option> </select> <div>{{select }}</div> <div> Similarly, this is not registered also will be the error </div> <div> —————————————— </div> <div> Below is select multiple selection , hold down CTRL to select continuously, hold down shift to choose the interval </div> <select style= "Width:200px;height:100px;overflow:hidden; v-model=" Multiple "multiple> <option value=" A ">A</option> <option value=" B ">B</option> <option Value= "C" >C</option> <option value= "D" >D</option> <Option value= "E" >E</option> </select> <div> Multiple selected values are:{{multiple}}</div> <div> Note that This multiple select box is the default </div> <div> —————————————— </div> <div> Dynamic rendering of a scroll bar with a y-axis. Checkboxes and multiple Select boxes are mutually affected </div> <label><input type= "checkbox" value= "A" v-model= "Dynamic" >a</ label><br/> <label><input type= "checkbox" value= "B" v-model= "Dynamic" >b</label><br/ > <label><input type= "checkbox" value= "C" v-model= "Dynamic" >C</label><br/> <select Style= "Width:200px;height:100px;overflow:hidden" v-model= "Dynamic" multiple> <option value= "A" >A</ option> <option value= "B" >B</option> <option value= "C" >C</option> </select> <div > selected is:{{dynamic}}</div> <div> —————————————— </div> <div> checked and selected values custom Checkbox</div > <label><input type= "checkbox" v-bind:true-value= "DIFFERENTVALUES.T" V-bind:false-value= "diffERENTVALUES.F "v-model=" Different ">true/false</label><br/> <div>different value: {{different} }</div> <div> Note that the above cannot be like a normal checkbox, using an array as a V-model variable for multiple checkbox, and its value is a property bound to the VM instance; The value that cannot be in V-bind is a string, but it can be an object, such as {a:1} (of course, the value displayed at this time is also an object) </div> <div> —————————————— </div> < Div> Custom radio</div> <label><input type= "Radio" v-bind:value= "text" v-model= "Customize"/> value is 1 </label> <label><input type= "Radio" v-bind:value= "textarea" v-model= "Customize"/> value is 1</label > <div>{{customize}}</div> <div> Similarly, a value can be either a property of a VM or an object, and a select is also valid. (These three are mainly selected, except for examples where the date type is also selected, but not significant) </div> <div> —————————————— </div> </div> <script > var vm = new Vue ({el: ' #app ', data: {text: "Default has Input", textarea: "Here is a multiline text \ n the second line, \\n is a newline character, but in the string is displayed as a space", Checkboxe 
S: [], Radio: "", select: "", Multiple: "", Dynamic: {}, Different: ", Differentvalues: {t:" true ",F: "false"}, customize: '}}) </script> 

② Add Parameters:

"1" lazy

The value is not updated until the focus state is canceled, not when the key is pressed.

Valid for both text input boxes and textarea

such as code:

<input type= "text" v-model= "text" lazy/> 
<div>{{text}}</div>

"2" number

Automatically converts the entered value to the number type, and returns the original value if it is a Nan type;

such as code:

<input type= "text" v-model= "text" number/> 
<div>{{text}}</div> 
<div>{{typeof Text} }</div>

If you add number to this argument, when you enter numbers, the prompt type is string, and after that, the number type is indicated by a pure digit;

"3" debounce= "Number of milliseconds"

The value of the trigger variable is changed when the number of milliseconds in a row does not change;

such as code:

<input type= "text" v-model= "text" debounce= "1000"/> 
<div>{{text}}</div>

When I enter 1,2,3,4,5,6 these six digits in the 500ms time difference, the text value will not be updated;

When I stop typing 1000ms, the text value will be updated;

Therefore, it is suitable for high consumption operations like Ajax.

The above is small set to introduce the Vuejs sixth Vuejs and Form element example analysis, hope to help everyone, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!