v-bind 和 v-model 的区别

最新推荐文章于 2024-07-05 11:27:33 发布

weixin_45829555

最新推荐文章于 2024-07-05 11:27:33 发布

阅读量435

点赞数 1

本文链接：https://blog.csdn.net/weixin_45829555/article/details/106763005

版权

v-bind 是单向绑定，绑定的是value （如果想改变值只能在data数据里面改，在input标签里无法修改）举个例子顺便说一下他的语法糖是" : "

<script src="./js/vue.js"></script>
		<script src="./js/vue.min.js"></script>
		<div id="app">
			<input type="text" v-bind:value="message" />
			<h2>您输入的值是:{{message}}</h2>
		</div>
		<script>
			const app = new Vue({
				el:"#app",
				data:{
					message:'你好啊',
				},
				methods:{
					
				}
			})
		</script>

v-model 是双向绑定，而且绑定的也是value，修改input里面的值，下面的message 的值也会改变

<script src="./js/vue.js"></script>
		<script src="./js/vue.min.js"></script>
		<div id="app">
			<!-- <input type="text" v-bind:value="message" /> -->
			<input type="text" v-model="message" />
			<h2>您输入的值是:{{message}}</h2>
		</div>
		<script>
			const app = new Vue({
				el:"#app",
				data:{
					message:'你好啊',	
				},
				methods:{
					
				}
			})
		</script>