vue的Object.defineProperty

Object.defineProperty,这个和wpf框架中的属性极其相似,我们可以在model中将变量注册为属性,并且添加command与数据绑定,如果属性的值变化,则会触发相关事件的执行。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="vue.min.js"></script>
	
	<script>
		function update(){
			alert(obj.name);
			console.log("更新");
		}
		var obj = {name:"york1"};
		var	i = 1;
		function observer(obj){
			if (typeof obj !=='object'){return obj;}
			for (var key in obj) {

				defineReactive(obj,key,obj[key]);
			}
		}
		function defineReactive(obj,key,value){
			Object.defineProperty(obj,key,{
				get:function(){ return value;},
				set:function(val){  if (val !=value) {update();}value = val;}
			}
				);
		}
		observer(obj);
		obj.name = "york2";
	</script>
</head>
<body>
	<div id="demo">
		<h4>{{msg}}</h4>
		<button  @click="change()"></button>
	</div>
		<script>
			var vm = new Vue({
		  el: "#demo",
		  data:{
		  	msg:'中国'
		  },
		  methods:{
		  	change(){
		  		i=i+1;
		  		obj.name="改变了"+i;
		  	}
		  }
		}
		)
	</script>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值