博客详情

vue中v-model指令双向数据绑定 (原创)

作者：朝如青丝暮成雪
发布时间：2019-03-23 15:22:35 文章分类：vue 阅读(898) 评论(0)

vue中v-model指令双向数据绑定，仅适用于所有的表单元素，如

input、textArea、 select、 checkbox等。

			<!DOCTYPE html>
		
			<html lang="en">
		
			<head>
		
			<meta charset="UTF-8">
		
			<title>Title</title>
		
			<script src="../lib/vue-2.2.2.js"></script>
		
			</head>
		
			<body>
		
			<div id="app">
		
			<!-- v-bind:xx 只能实现单向绑定 M到V -->
		
			<!-- <input type="text" :value="msg"/> -->
		
			<!-- 表单输入框元素的value与vm对象中data属性双向绑定 支持M到V和V到M -->
		
			<!-- v-model(双向绑定) 只能应用于表单元素的value属性中。
		
			 如input \select \checkbox \textarea等 -->
		
			<input type="text" v-model="msg"/>
		
			</div>
		
			</div>
		
			</body>
		
			<script>
		
			var vm=new Vue({
		
			el:"#app",
		
			data:{
		
			msg:'hello你好'
		
			},
		
			methods:{
		
			}
		
			});
		
			</script>
		
			</html>