单向绑定

最新推荐文章于 2025-02-05 20:35:57 发布

FreeBSFree

最新推荐文章于 2025-02-05 20:35:57 发布

阅读量146

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_17190231/article/details/90261998

vue 专栏收录该内容

17 篇文章

订阅专栏

本文通过一个简单的HTML页面展示了如何使用Vue.js实现数据绑定和方法调用。页面中，初始姓名为xiaoMing，通过Vue实例进行数据绑定并在页面上显示。之后，修改Vue实例的姓名属性并调用方法，展示数据和方法的变化。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{utf-8}">
		<title>test</title>
		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>name:{{name}}</h1>
			<h1>method:{{say()}}</h1>
		</div>
		
		<script>
			var vm = new Vue({
			el: "#app",
			data: {
				name:"xiaoMing"
			},
			methods: {
				say: function() {
					return "study";
				}
			}
		})
		   vm.name = "xiaoHui";//单向绑定vm -> view
		   var d1 = document.getElementById('d1');
		   d1.innerHTML = 'haha'//视图变化不会更新vm
		   alert(vm.name);
		</script>
		
	</body>
</html>