利用Object.defineProperty实现Vue数据双向绑定
2024-10-19 14:51:55
body部分很简单,一个输入框和一个展示的div
<div>
<p>你好,<input id='nickName'></p>
<div id="introduce"></div>
</div>
逻辑部分
<script>
var userInfo = {};
var a = '';
var inp = document.getElementById('nickName');
var odiv = document.getElementById('introduce');
Object.defineProperty(userInfo, "nickName", {
get: function(){
return inp.value;
},
set: function(nick){ }
});
Object.defineProperty(userInfo, "introduce", {
get: function(){ },
set: function(introduce){
odiv.innerHTML = introduce;
}
}) inp.addEventListener("keyup",function(){
userInfo.introduce = userInfo.nickName;
}) </script>
效果是
最新文章
- SSM框架总结(1)
- Android学习——uses-sdk标签详解
- android内部培训视频_第一节
- qt播放器
- 背投广告js
- iOS平台在ffmpeg中使用librtmp
- KVM之Live Migration
- C语言基础 - 实现动态数组并增加内存管理
- Libevent教程001: 简介与配置
- SpringBoot集成Lombok,应用+源码解析,让代码优雅起来
- express脚手架的安装,以及ejs的语法
- [angularjs] angularjs系列笔记(八)事件
- lua基于oopclass的属性节点类 和 集合类
- node cluster模块,仿多线程并发调用,
- Unity应用架构设计(4)——设计可复用的SubView和SubViewModel(Part 1)
- junit 基础使用
- android:onClick都做了什么
- 什么是pear的channel?
- C++图形开发相关
- Python单元测试框架之pytest 3 -- fixtures