object.difineProperty

最新推荐文章于 2024-01-03 10:30:43 发布

asd2014916

最新推荐文章于 2024-01-03 10:30:43 发布

阅读量130

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/MR-cui/p/10177532.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="title">
        原有标题
    </div>
    <button id="btn">button </button>
    <script>

            var data ={
                title:"practice",
                name:"cuiyang"
            }
            observer(data)
            function observer(obj){
                Object.keys(obj).forEach((item)=>{
                    defineReactive(obj,item,obj[item])
                })
            }
            function defineReactive(obj,key,value){
                Object.defineProperty(obj,key,{
                    get(){
                        return value
                    },
                    set(newValue){
                        value=newValue
                        title.innerHTML=value
                    }
                })
            }
            console.log(data)

            var title=document.getElementById('title');
            var btn=document.getElementById('btn');
            btn.onclick=function(){
                data.title="改变标题"
            }
    </script>
</body>
</html>




vue.js源码