In a previous article summarizing the usage of v-bind, we found that V-bind implements one-way binding of data, binds the data in the Vue instance to the element attribute values, and today we summarize the data bidirectional binding V-model in Vue.
V-model implementation of two-way binding is mainly by binding a value property through V-bind, and then using the v-on directive to bind the input event to the current element, let's summarize how to use the creation.
Basic usage<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Vue</title> <Scriptsrc= "./vue.js"></Script></Head><Body> <DivID= "Demo"> <inputV-model= "message"> <P>{{Message}}</P> </Div> <Script> varDemo= NewVue ({el:'#demo', data:{message:"Hello", }, }) </Script> </Body></HTML>
At initialization time, when we assign a message to Hello, the value is displayed in the input box and P tag, and then when we change the value of input, the value in the P tag changes.
V-model.lazyIn the example above, when we change the value of the input box, the contents of the P tag change immediately, that is, by default, V-model synchronizes the value of the input box with the data in the input event, but can add a modifier, lazy, This changes to synchronize when the input box loses focus (synchronizing the data when the mouse moves out of the box).
<DivID= "Demo"> <inputV-model.lazy= "Mess2" /> <P>Mess2 is: {{MESS2}}</P> </Div> <Script> varDemo= NewVue ({el:'#demo', data:{Mess2:'Hello', }, }) </Script>
In the above example, because we added the lazy after the V-model, changed the synchronization of the data, so when we change the value in the input box, the value of the below input box does not change directly, but the data synchronization occurs after the mouse is moved.
V-model.numberIn input, there is an input that type= "number", but in HTML, the number type data entered in input of that type is finally output as a string type.
<DivID= "Demo"> <Div>type= "number" input box<inputV-model= "NUM1"type= "Number" /><span>{{Type1}}<span> </Div> </Div> <Script> varDemo= NewVue ({el:'#demo', data:{NUM1:2,}, computed:{type1 () {return typeof( This. Num1)}, } }) </Script>
When initialized, gets the value of the binding, which is the number type, but when the value of the input box changes, the type becomes a string type, at which point we can add a modifier number to V-model to process the input value, This allows us to get the number type value.
<DivID= "Demo"> <Div>Number modifier input<inputV-model.number= "Num2"type= "Number" /><span>{{type2}}<span> </Div> </Div> <Script> varDemo= NewVue ({el:'#demo', data:{num2:"'}, computed:{type2 () {return typeof( This. num2)} } }) </Script>
V-model.trim
In the input box, it is very important to restrict the user's entry, the most common is to go to the space, in Vue, if you want to automatically filter user input of the end and end space, you can add trim modifier to V-model filter input, it should be noted that the method can only remove the space between the end and end, The middle space cannot be removed.
<DivID= "Demo"> <inputV-model.trim= "MESS3"> <P>MESS3 is: {{MESS3}}</P> </Div> <Script> varDemo= NewVue ({el:'#demo', data:{MESS3:"' }, }) </Script>
Radio boxes and calculated properties are used
<DivID= "Demo"> <inputtype= "text"V-model= "a" Number>The result of this number plus one is {{b}}<br>.<inputtype= "Radio"name= "Sex"V-model= "Sex"value= "Male">male<inputtype= "Radio"name= "Sex"V-model= "Sex"value= "female">woman your sex is {{sex}}</Div> <Script> varDemo= NewVue ({el:'#demo', data:{A:"", Sex:"',}, computed:{B:function(){ return This. A+1; } } }) </Script>
Vue's V-model
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
