Today's content is v-model
Two-way data binding is one of the soul characteristics of Vue, and v-model perfectly embodies the characteristics of Vue two-way binding.
You can use the v-model command to create two-way data binding on form input , textarea, and select elements . It will automatically select the correct method to update the element based on the control type . Although somewhat magical, v-model is essentially just syntactic sugar . It is responsible for monitoring the user's input events to update the data, and perform some special processing on some extreme scenarios .
v-model will ignore the initial values of value, checked, selected, and attribute of all form elements and always use the data of the Vue instance as the data source. You should declare the initial value in the data option of the component via JavaScript.
text
<div id="app">
<p>{
{message}}</p>
<h3>文本框</h3>
<p>v-model:<input type="text" v-model="message" /></p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'Hello'
}
});
</script>
What you enter in the input box will be quickly rendered into the p tag above, which completes a two-way binding of the most basic data , which is very simple and very practical.
Multiline text
<div id="app">
<h3>文本域</h3>
<textarea cols="30" rows="10" v-model="message"></textarea>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'Hello'
}
});
</script>
The effect is the same as a single line of text, the input content will be immediately bound to the message and rendered on the page
Checkbox
<div id="app">
<h3>多选框绑定数组</h3>
<p>
<input type="checkbox" id="Ray" value="Ray" v-model="names">
<label>Ray</label>
<input type="checkbox" id="Creator" value="Creator" v-model="names">
<label>Creator</label>
<input type="checkbox" id="Code" value="Code" v-model="names">
<label>Code</label>
</p>
<p>{
{names}}</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
names:[],
}
});
</script>
When we select options, the selected content will be immediately bound to the names and rendered on the page at a very fast speed.
Single box
<div id="app">
<h3>单选框绑定</h3>
<p>
<input type="radio" id="m" value="男" v-model="sex">
<label>男</label>
<input type="radio" id="w" value="女" v-model="sex">
<label>女</label>
</p>
<p>{
{sex}}</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
sex:''
}
});
</script>
The effect is basically similar to the checkbox. After selecting the option, the selected content is bound to the sex and then rendered on the page.
In addition, v-model has some modifiers
- .lazy
By default, v-model synchronizes the value of the input box with the data after each input event is triggered (except when the above input method combines text). You can add the lazy modifier to switch to synchronization after the change event: - .number
If you want to automatically convert the user's input value to a numeric type, you can add the number modifier to v-model: - .trim
If you want to automatically filter the first and last blank characters entered by the user, you can add trim modifier to v-model
<div id="app">
<p>{
{message}}</p>
v-model的修饰符:
<p>v-model.lazy(懒加载):<input type="text" v-model.lazy="message" /></p>
<p>v-model.number(只绑定数字):<input type="text" v-model.number="message" /></p>
<p>v-model.trim(去空格至1个):<input type="text" v-model.trim="message" /></p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'Hello'
}
});
</script>
You can actually operate it and see the functions of the modifiers. It is quite convenient.
v-model is very convenient, simple, and flexible when processing form input binding. Please try it out. You can try to make a small demo for login and registration.
There is a WeChat mini program course design, complete design needs, contact personal QQ: 505417246
Pay attention to the following WeChat public account, you can receive WeChat applet, Vue, TypeScript, front-end, uni-app, full stack, Nodejs, Python and other practical learning materials. The
latest and most complete front-end knowledge summary and project source code will be released to the WeChat public as soon as possible No., please pay attention, thank you!
