Transfer blog Garden v-model modifiers and use
of: Hu Zhuo
v-model modifier v-model.lazy only a blur in the input when the input trigger block occurs
v-model.trim the spaces before and after the user input to remove the
v-model.number converts a character string input by the user into a number
Use the input textarea select the
The following code is not written js portion, add in data corresponding to its own property.
When the v-model change will occur in synchronization input value is entered then the name of the input frame and the frame is changed name bindings
<input type="text" v-model="name"><br />
<span> {{ name }} </span>
However, this will affect the use, so we can use the modifier v-model of lazy
v-model.lazy only a blur when the trigger occurs in the input box input
<input type="text" v-model.lazy="name"><br />
<span> {{ name }} </span>
v-model.trim the spaces before and after the user enters removed, we enter a lot of space and then type in the input box, the following span was the same old, not extra space, because only a space to display HTML, but value name is not the same, it will count these spaces, we can add a pre tag on the span, then these spaces will be displayed
<input type="text" v-model="name"><br />
<pre><span> {{ name }} </span></pre>
v-model.trim is used to remove these extra spaces, of course, if it is password input box, etc., please do not add to this modification, some users do passwords with spaces.
<input type="text" v-model.trim="name"><br />
<span> {{ name }} </span>
Then you whether to increase the number of spaces before and after it will be removed.
v-model.number converts a character string input by the user into a number
<input type="text" v-model="age"><br />
<span> {{typeof age }} </span>
In this case, the number you entered is automatically converted to a string, if coupled .number
<input type="text" v-model.number="age"><br />
<span> {{typeof age }} </span>
This will put you to enter numbers into a number, if you enter a non-number in the input box, then when blur, from the first non-number at the main will all be cleared.
v-model used in the input textarea select, the text in front of us are used in the input type =, in the textarea and it is the same, the only difference is that this is a multi-line.
Use as a radio in type
你的性别是？
男：<input v-model="sex" type="radio" value="male">
女：<input v-model="sex" type="radio" value="famale">
<br />
<span> {{ sex }} </span>
Which, the value of sex is its value then select
Use as a checkbox in type
你的性取向是：
男：<input v-model="sexual_orientation" type="checkbox" value="male">
女：<input v-model="sexual_orientation" type="checkbox" value="famale">
<br />
<span> {{ sexual_orientation }} </span>
When multiple choice, should attribute data region (sexual_orientation) v-model binding arranged into an array.
In use in select
你的家乡在哪？
<select v-model="from" name="" id="">
<option name="湖北" value="1">湖北</option>
<option name="湖南" value="2">湖南</option>
</select>
<span>{{ from }}</span>
You can also select multiple choice
You want to go?
<select v-model="from" name="" id="" multiple>
<option name="湖北" value="1">湖北</option>
<option name="湖南" value="2">湖南</option>
<option name="湖南" value="3">河北</option>
<option name="湖南" value="4">河南</option>
</select>
<span>{{ from }}</span>
As the attributes and checkbox (from) v-model data set is arranged as an array of binding