今天突然想到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中的值。