首页 > 其他分享> > vue.js v-model 与 v-bind的区别

vue.js v-model 与 v-bind的区别

2019-08-22 18:40:43 作者：互联网

可以简单地这么理解：

v-model 为双向数据绑定； v-bind为单向数据绑定。

先来看一个例子：

<!DOCTYPE>
<html>
<head>
<title>v-model与v-bind</title>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
	<div>
		<input v-model="message1">
		<button @click = "submitChange1">更改message的值</button>
		<div>input的内容为：{{message1}}</div>
	</div>
	<br>
	<div>
		<input :value = "message2">
		<button @click = "submitChange2">更改message的值</button>
		<div>input的内容为：{{message2}}</div>
	</div>
</div>
<script>
var app = new Vue({
	el: "#app",
	data: {
		message1: '我是1号',
		message2: '我是2号'
	},
	methods: {
		submitChange1() {
			this.message1 = '我是1号(修改)'
		},
		submitChange2() {
			this.message2 = '我是2号(修改)'
		}
	}
})
</script>
</body>
</html>

首先更改输入值，可以看到，v-model绑定的值修改了message值，但v-bind绑定的值却没有修改message值。

接下来点击改变messge的值按钮，发现两个输入框中的内容均发生了改变：

因此，在与用户交互的元素一般使用v-model，如表单元素，这样能够得到用户的操作值，在一般的无交互的元素中使用v-bind进行数据绑定（在父子组件传递数据时也会采用v-bind绑定）。

至于vue.js中v-model与v-bind的实现原理，有待学习补充。

标签：vue,bind,绑定,message2,message1,model,message
来源： https://blog.csdn.net/bingqise5193/article/details/100021082