The v-model instruction vue.js

1. v-model Where can use?

<input>      //表单的一个文本框
<select>     //下拉菜单
<textarea>   //文本域
components   //vue中的组件

2. v-model modifier what?

.lazy ----- replace input monitor change event
.number input string into a valid number
.trim ----- filter input and trailing spaces

3. Use some of the v-model information to know

1. v-model actually is: a combination of value and @input syntactic sugar (: is the abbreviation v-bind, and @ v-on is an abbreviation)
2. When you add a property to the v-model components, the default will value as properties of the component, and then the 'input' name when the value of the event as a component to bind events
3. The disadvantage of v-model: When you create a similar check box or radio button of common components, v-model has not worked

4. The base code shows:

/*-----------------------html---------------------------------*/
<div id="root">
    <input type="text" v-model="str">
    <p>{{str}}</p>
</div>

/*-----------------------js---------------------------------*/
new Vue({
	el:"#root",
	data:{
		str:"这里是使用的值",
	},

})

The results show:

When you add v-model attribute to an element, the default will value as an attribute of the element, then the 'input' event as a real-time delivery value of trigger events

4. modifier usage:

<input type="text" v-model.lazy="str">    //取代 input 监听 change 事件 
<input type="text" v-model.number="str">  //输入字符串转为有效的数字
<input type="text" v-model.trim="str">    //输入首尾空格过滤

Directly behind the v-model plus the corresponding function so that you can achieve