vue学习笔记-3-双向数据绑定

最新推荐文章于 2024-09-06 22:24:42 发布

笑道三千

最新推荐文章于 2024-09-06 22:24:42 发布

阅读量160

点赞数

分类专栏： # vue基础

本文链接：https://blog.csdn.net/weixin_42349568/article/details/108182169

版权

vue基础专栏收录该内容

37 篇文章 1 订阅

订阅专栏

在这里插入图片描述
双向数据绑定，实际上就是说，页面的内容发生了变化，会导致对应的vm.data中的数据变化。
而vm.data中数据的变化，同样会导致页面内容的变化，这就是数据的双向绑定。
换句话说，就是页面的显示数据和vm.data中的数据同步变化了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			[v-cloak]{
			 	display:none
			 }
			 #app{
				 width: 20%;
				 margin: 200px auto;
			 }
		</style>
	</head>
	<body>
		<div id="app">
			
			<div >页面上显示的内容：</div>
			<input v-model="msg" id="input1">
			<div >vm.msg的内容：</div>
			<input id="vmmsg">
		</div>
		<script type="text/javascript" src="./js/vue.min.js"></script>
		<script type="text/javascript">
			var vm=new Vue({
				el:'#app',   
				data:{       
					msg:'hello vue',
				}
			})
			var input2=document.getElementById("vmmsg")
			var input1=document.getElementById("input1")
			input2.value=vm.msg
			input1.oninput=function(){
				input2.value=vm.msg
			}
			//以上代码让第二个输入框实时显示vm.msg中的内容
			input2.oninput=function(){
				vm.msg=input2.value
			}
			//以上代码让第二个输入框可以更改vm.msg中的内容
		</script>
	</body>
</html>

这样写的代码，上面那个文本框的数据就是页面的数据，下面那个数据就是vm.msg。可以看到，这两者是同步变化的。这就是v-model实现的双向数据绑定。
在这里插入图片描述

也就是从视图到模型，用的是数据监听，视图发生变化。导致模型中数据实时更新。
从模型到视图，用的是数据绑定。让视图实时显示模型中数据