v-model和v-bind的区别

今天突然想到v-model和v-bind是啥区别,虽然我代码里是用了,但是发现自己好像并没有理清楚这俩货到底是啥区别啊??囧。。。。
然后翻开自己的代码才明白,原来只有v-model才是真正的双向数据绑定,v-bind只是单向的数据输送。
实验一下:

<template>
<div>
		<input  type="text" v-model="message1"/>
		<h1>{{message1}}</h1>
		<input type="text" :value="message2"/>
		<h1>{{message2}}</h1>
</div>
</template>

<script>
	export default{
		data(){
			return{
				message1:'我爱你!',
				message2:'我爱你too!',
			}
		}
	}
</script>

结果如下:
对于v-model(双向绑定):message1的值会随着输入框中的变化而变化;
对于v-bind:message2的值会随着输入框中的变化而变化,相反,通过改变data.message2的值来改变input中的值。

猜你喜欢

转载自blog.csdn.net/weixin_43231398/article/details/86147626