intellij idea安装 history java设计模式 Java开发手册 canal安装 xml delphi safari tags 找公司做网站 ie内核浏览器怎么设置 cad怎么重复上一次命令 spark大数据处理技术 docker查看所有容器 完全去vm去虚拟化工具 python教程 python安装环境变量 java中string java基础代码 java时间类型 linux硬盘 python教程视频 opengl编程指南 linux命令详解词典 onenote2003 马赛克软件 stata软件 ps怎么插入表格 ps选择反向快捷键 stretchcolumns emit qq免安装版 xapk安装器 mysql导出数据 华为动态照片 头条视频解析 backtrack4 directx卸载 ocr文字识别软件免费下载 ps平面广告设计教程
当前位置: 首页 > 学习教程  > 编程语言

简单版vue的双向绑定

2020/8/31 14:36:56 文章标签:

我们通过Object.defineProperty( )实现双向数据绑定

方式一:

var ojb = {
    content: ''
}

var newObj = ''

Object.defineProperty(ojb, 'content', {
    get() {
        return newObj
    },
    set(val) {
        newObj = val
        observer()
    }
})

function observer() {
    content.innerHTML= ojb.content
    ifrom.value = ojb.content
}

ifrom.oninput = function() {
    ojb.content = this.value
}

方式二:

var obj = {
    content: ''
}

//深拷贝
var newObj = JSON.parse(JSON.stringify(obj))

Object.defineProperty(ojb, 'content', {
    get() {
        return newObj.content
    },
    set(val) {
        newObj.content = val
        observer()
    }
})

function observer() {
    content.innerHTML= ojb.content
    ifrom.value = ojb.content
}

ifrom.oninput = function() {
    ojb.content = this.value
}


本文链接: http://www.dtmao.cc/news_show_150261.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?