Vue v-model指令

Vue v-model教程

使用 Vue v-model 指令，可以实现表单元素和 Model 中数据的双向绑定。而我们之前使用的 Vue v-bind 指令，Vue v-text 指令和 Vue v-html 指令只能实现数据的单向绑定，即从 M 自动绑定到 V。

Vue v-model 只能运用在表单元素中。

Vue v-model修饰符

修饰符	描述
Vue v-model .lazy	取代 input 监听 change 事件。
Vue v-model.number	输入字符串转为数字。
Vue v-model.trim	输入首尾空格过滤。

案列

v-model指令使用

<!DOCTYPE html>
<html>
<head>
	<title>Vue v-model 指令</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<body>
	<div id="app">
		<input type="text" style="width:500px" v-model="message">
		<p>{{message}}</p>
        <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script>
	var v1 = new Vue({
	    el:"#app",
	    data:{
	        message:"Hello HaiCoder",
	    }
	})
</script>
</html>

浏览器运行效果如下图所示：

21 vue vmodel.png

我们看到，使用 Vue v-model 指令，同样实现了数据的绑定，但这里的绑定是双向绑定。即如果表单控件的值发生了变化，那么 Vue 实例对象中的元素值也同样会发生变化。

现在，我们修改表单中的数据，此时会发现表单下面的 p 标签里面的元素的值会随着表单元素的值一起变化，运行效果如下图所示：

22 vue vmodel.png

Vue v-model指令总结

使用 Vue v-model 指令，可以实现表单元素和 Model 中数据的双向绑定。Vue v-model 只能运用在表单元素中。