如何实现mvvm数据的双向绑定

最新推荐文章于 2023-05-26 07:34:07 发布

小仙女哦！

最新推荐文章于 2023-05-26 07:34:07 发布

阅读量326

点赞数 1

文章标签： javascript vue.js html5 node.js jquery

本文链接：https://blog.csdn.net/qq_45645308/article/details/104681617

版权

如何实现mvvm数据的双向绑定，通过代码来讲解一下

<body>
               <!-- //vue实例所控制的这个元素区域，就是我们的V 就是view-->
				<div id="app">
				<p>{{message}}</p>
				<input type="text" v-model="message"/>//一个文本框
				</div>
				
				<script>
					//这是我们的model
					var myDate={
					  message:'欢迎学习vue!'
					}
					//创建一个vue的实例
					//我们new的这个VM对象就是我们的MVVM中的VM,就是viewModel，它连接view和model
				new Vue({
						el:'#app',
					//这里的data就是我们我们的MVVM中的M，就是model
					     data:myDate
				})
					
				</script>
	</body>
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200305191226657.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjQ1MzA4,size_16,color_FFFFFF,t_70)```这是一个图的解释![在这里插入图片描述](https://img-blog.csdnimg.cn/20200305191512230.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjQ1MzA4,size_16,color_FFFFFF,t_70)

小仙女哦！

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何实现mvvm数据的双向绑定

如何实现mvvm数据的双向绑定，通过代码来讲解一下<body>  <div id="app"> <p>{{message}}</p> <input type="text" v-model="messa...
复制链接

扫一扫