vue数据双向绑定案例

最新推荐文章于 2024-04-22 09:07:57 发布

慕容屠苏

最新推荐文章于 2024-04-22 09:07:57 发布

阅读量985

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/kerryqpw/article/details/89209431

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

vue数据双向绑定案例

vue是通过MVVM实现数据的双向绑定，通过DOM Listeners监听view,Data Bindings监听model，实现数据的双向绑定的。

实现效果：

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue数据的双向绑定</title>
	</head>
	<body>
		<!--
			轻量级框架
			性能优秀
			MVVM模式
		-->
		<div id="app">
			<input v-model="msg"><br/>
			{{msg}}
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

		
		<script type="text/javascript">
			var vue=new Vue({
				el:"#app",//需要被vue模版化管理的dom结构是哪个
				data:{//模型数据
					msg:"hello world,vue js"
				}
			});
			
		</script>
	</body>
</html>

慕容屠苏

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue数据双向绑定案例

vue数据双向绑定案例vue是通过MVVM实现数据的双向绑定，通过DOM Listeners监听view,Data Bindings监听model，实现数据的双向绑定的。实现效果：实现代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title...
复制链接

扫一扫