前端面试题：vue 的双向数据绑定原理，v-model的源码

一、双向绑定：在vue中，使用指令v-model来实现双向绑定，双向绑定的意思是：表单改变，数据也改变，数据改变，表单也改变，以下为示意图：二、示例代码：<!DOCTYPE html><html><head><meta charset="utf-8"><title></title&g...

田江

2897人浏览 · 2019-08-21 17:55:55

田江 · 2019-08-21 17:55:55 发布

一、双向绑定：

在vue中，使用指令v-model来实现双向绑定，双向绑定的意思是：表单改变，数据也改变，数据改变，表单也改变，以下为示意图：

二、示例代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<div id="app">
		<input type="text" v-model="msg" /> 
	     <!-- <input type="text" :value="msg" @input="msg = $event.target.value" /> -->
		<input type="text" :value="msg" @input="changeValue($event)" /> 
		<p>{{msg}}</p>
	</div>
</body>
</html>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">

let vm = new Vue({
	el:"#app",
	data:{
		msg:"hello"
	},
	methods:{
		changeValue:function(e){
			console.log(e);
			 this.msg = e.target.value;
		}
	}
});	

</script>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^