网站

vue中的v-model使用

分类 :vue  vue1     2018-02-23 人气: 0条评论

v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上。
v-model指令实现双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据。
如:
window.onload = function(){
				var c= new Vue({
					el:'#box',
					data:{
						msg:'第一个Vue实例'
					}
				});
			};
		</script>
html的代码为
<input type="text" name="" id="" value="" v-model="msg"/>
			{{msg}}
显示后的结果

用了两种方法显示msg的内容,当在input中改变内容时,后面的也会跟着变化,这就是双向绑定。

继续阅读