1. Usage of form labels--value bindings and modifiers
The notation for the value binding: V-bind:value or Shorthand: value
Modifier: lazy, number, trim. Usage such as: V-model.lazy
2. When using the form, you need to pay attention to
The two properties of V-bind:true-value and V-bind:false-value are only used on a checkbox
3. Examples and explanations
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "UTF-8"> <title></title> <Scriptsrc= "Vue.js"></Script></Head><Body> <DivID= "App"> <inputtype= "button"V-on:click= "Printvalue"value= "Value of output form" /> <!--in this case, Isapple is true or false. - <inputtype= "checkbox"V-model= "Isapple" /> <!--in that case, Apple is a or B. - <inputtype= "checkbox"V-model= "Apple"V-bind:true-value= "a"V-bind:false-value= "B" /> <!--In this case, the selected Appleo is an object, bound to the object C - <inputtype= "Radio"V-model= "Appleo"V-bind:value= "C"> <BR> <!--in section II: The Use of Directives (2) also mentions the form's modifiers - <P>Lazy changes the data of input to the change event, without adding the default is synchronous change.</P> <inputtype= "text"V-model.lazy= "AppleT" /> <span>{{AppleT}}</span> <BR> <P>Trim automatically filters the end and end spaces of user input</P> <inputtype= "text"V-model.trim= "Applem" /> <span>{{Applem}}</span> <BR> <P>Automatically converts the user's input value to number type (returns the original value if the conversion result of the original value is NaN)</P> <inputtype= "text"V-model. number= "Applen" /> <span>{{typeof Applen}}</span> </Div></Body><Scripttype= "Text/javascript"> varapp= NewVue ({el:"#app", data: {isapple:"", Apple:"", A:"1", B:"2", C: {A:1}, Appleo:"", AppleT:"", Applem:"", Applen:""}, methods: {printvalue:function() { varThisdata= This. $data; Console.log (thisdata.isapple); Console.log (thisdata.apple); Console.log (Thisdata.appleo); } } });</Script></HTML>
If this chapter does not cover the knowledge of the forms you want to see, see section II: Use of directives (2)
Section Fifth: Usage of form labels--value bindings and modifiers
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
