Object.defineProperty实现简单的双向绑定
2018-05-01 18:38
423 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.box{
width: 200px;background-color: skyblue;
}
img{
display: block;
}
</style>
</head>
<body>
<input type="text" id="btn" />
<p></p>
<script type="text/javascript">
let obj ={};
let temp = {};
document.getElementById('btn').onkeyup = function(){
obj.name = document.getElementById('btn').value;
}
Object.defineProperty(obj,'name',{
get(){
return 1
},
set(val){
temp['name'] = val;
document.querySelector('p').innerHTML = temp['name'];
}
})
</script>
</body>
</html>改变input框内容即可重新渲染
阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用Object.defineProperty实现简单的js双向绑定
- 使用Object.defineProperty实现简单的js双向绑定
- 极简使用Object.defineProperty实现双向绑定
- 双向数据绑定实现之Object.defineProperty
- 应用defineProperty简单实现vue的双向数据绑定
- Vue源码解读——实现一个双向绑定（Object.defineProperty与observe）
- 利用defineProperty实现数据的双向绑定
- JS中的双向数据绑定及Object.defineProperty方法
- Vue双向绑定的关键：Object.defineProperty()
- Vue 双向数据绑定原理分析 以及 Object.defineproperty语法
- vue 数据绑定实现的核心 Object.defineProperty()
- JS中的双向数据绑定及Object.defineProperty方法
- vue.js利用defineProperty实现数据的双向绑定
- vue 数据绑定实现的核心 Object.defineProperty()
- Vue.js双向绑定内核—Object.defineProperty解析
- JavaScript使用Object.defineProperty方法实现双数据绑定
- Object.defineProperty()的set方法除了用于双向绑定还能干嘛？
- 利用object.defineProperty实现数据与视图绑定
- 五十行javascript代码实现简单的双向数据绑定