vue.js的v-model指令

1. v-model 能在哪里使用？

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

2. v-model 修饰符有哪些？

.lazy -----取代 input 监听 change 事件
.number 输入字符串转为有效的数字
.trim -----输入首尾空格过滤

3. 使用 v-model 要知道的一些信息

1. v-model其实是 :value 与@input相结合 的一块语法糖（:是v-bind 的缩写，@是 v-on 的缩写）
2. 给组件添加 v-model 属性时，默认会把 value 作为组件的属性，然后把 ‘input’ 值作为给组件绑定事件时的事件名
3. v-model 的缺点：在创建类似复选框或者单选框的常见组件时，v-model就不好用了

4. 基础代码展示：

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

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

})

结果展示：

在给 元素添加 v-model 属性时，默认会把 value 作为元素的属性，然后把 ‘input’ 事件作为实时传递 value 的触发事件

4. 修饰符用法：

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

直接在 v-model 后面加让即可实现对应功能