【vue】v-model双向绑定

如何实现双向绑定呢？一起来看看吧

正文

html代码

<Input v-model="value" placeholder="Enter something..." style="width: 100px" />

script

	data:{
					list:[],
					inputValue:'',
					 value: ''
				},
	methods:{
					handleBtnClick:function(){					
						this.value="哈哈"
					}
				}

效果图

点击之前

点击之后

分析

v-model在我看来就是在一个控件里等于这个控件中内置属性，然后可以在data中给其赋值，就会让控件显示初值。如果在方法中赋值的话，就会让控件显示赋值的值。另外，双向的意思就是当控件中的值发生改变，那么方法中的值也会改变。

深化

那么如果不是在控件中，在div等标签中如何使用呢？

其实和在控件中是一个道理

html文件

<div v-model="value">{{value}}</div>

script

handleBtnClick:function(){				
						this.value="哈哈"
					}

效果图

点击前

点击之后

小结

理解的有不到位的地方欢迎大家指出