Vue内容绑定，v-model
v-model演示
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上或者组件上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-model指令</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div >
<input type="text" v-model.lazy="text1" placeholder="请输入姓名">
<p>姓名：{{text1}}</p>
<input type="checkbox" v-model="text2">
<p>是否90后：{{text2}}</p>
<input type="radio" value="男" v-model="text3">
<input type="radio" value="女" v-model="text3">
<p>性别：{{text3}}</p>
<select v-model="text4">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>您选择: {{ text4 }}</p>
<input type="checkbox" value="苹果" v-model="text5">苹果
<input type="checkbox" value="香蕉" v-model="text5">香蕉
<input type="checkbox" value="梨" v-model="text5">梨
<p>你喜欢的水果：{{text5}}</p>
</div>
</body>
<script type="text/javascript" charset="utf-8">
new Vue({
el: "#box",
data: {
text1: "刘小涛",
text2: "true",
text3: "保密",
text4: "",
text5: [],
}
})
</script>
</html>输入框，单选，复选，下拉框演示案例；复制可运行。
修饰符
.lazy
在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-model指令</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div >
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
<p>{{msg}}</p>
</div>
</body>
<script type="text/javascript" charset="utf-8">
new Vue({
el: "#box",
data: {
msg: "刘小涛",
}
})
</script>
</html>.number
如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-model指令</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div >
<input v-model.number="age" type="number">
<p>{{age}}</p>
</div>
</body>
<script type="text/javascript" charset="utf-8">
new Vue({
el: "#box",
data: {
age: "",
}
})
</script>
</html>.trim
如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-model指令</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div >
<input v-model.trim="input">
<p>{{input}}</p>
</div>
</body>
<script type="text/javascript" charset="utf-8">
new Vue({
el: "#box",
data: {
input: "",
}
})
</script>
</html>v-model原理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-model指令</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div >
<input v-model="something"/>
<!-- 等同 -->
<input v-bind:value="something" v-on:input="something = $event.target.value"/>
<p>{{something}}</p>
</div>
</body>
<script type="text/javascript" charset="utf-8">
new Vue({
el: "#box",
data: {
something: "",
}
})
</script>
</html>解释：
$event 指代当前触发的事件对象。
$event.target 指代当前触发的事件对象的dom
$event.target.value 就是当前dom的value值
在v-on:input方法中，
value => something
在:value中：
something => value
如此，形成了一个闭环，也就是所说的数据的双向绑定。
满足语法糖规则：属性必须为value，方法名必须为：input。
想自定组件实现v-model，可以在下面我参考文章里了解更多。
参考文章：
- 上一篇 »[Vue源码分析] v-model实现原理
- 下一篇 »vue复选框获取值的补充