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

最新推荐文章于 2024-03-31 12:06:11 发布

bingqise5193

最新推荐文章于 2024-03-31 12:06:11 发布

阅读量255

点赞数

分类专栏： vue 文章标签： vue v-model v-bind 数据绑定

本文链接：https://blog.csdn.net/bingqise5193/article/details/100021082

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

可以简单地这么理解：

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的实现原理，有待学习补充。

bingqise5193

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue.js v-model 与 v-bind的区别

可以简单地这么理解：v-model 为双向数据绑定； v-bind为单向数据绑定。先来看一个例子：<!DOCTYPE><html><head><title>v-model与v-bind</title><meta charset="utf-8"><script src="https://cdn.j...
复制链接

扫一扫

专栏目录