JS数据双向绑定原理与用法实例分析
更新时间：2019年11月16日 11:50:05 作者：lovebread
这篇文章主要介绍了JS数据双向绑定原理与用法,结合实例形式分析了JavaScript数据双向绑定相关原理、实现技巧与操作注意事项,需要的朋友可以参考下
本文实例讲述了JS数据双向绑定原理与用法。分享给大家供大家参考，具体如下：
通常在前端开发过程中，经常遇到需要绑定两个甚至多个元素之间的值，比如将input的值绑定到一个h1上，改变input的值，h1的文字也自动更新。
<h1 id="title">Hello</h1> <input type="text" id="a" />
首先是在界面上更改input的值，需要监听input的“input”事件：
var input = document.getElementById("a"),
title = document.getElementById("title");
input.oninput = function (e) {
title.innerHTML = this.value;
};
如果是在代码中手动修改input.value属性，这时候最常规的方法是手动更新h1的文字：
input.value = '123'; title.innerHTML = input.value;
有没有办法能让我们在更新input的value值的时候，自动更新h1的文字呢？当然，我们需要用到Object.defineProperty方法：
Object.defineProperty(input, 'val', { //这里必须定义一个新的属性名称，不可以用value，否则会报错。
get: function () {
return this.value;
},
set: function (val) {
this.value = val;
title.innerHTML = val;
}
});
这样我们就为input增加了一个val属性，val的值与input.value是关联的，并且我们在val的setter中增加了更新h1文字的代码，现在我们就可以直接通过
input.val = 'good';
的方式来同时更新input.value和h1的文字了
用Object.defineProperty这个方法来实现数据的双向绑定是Vue的核心思想，该方法的更多细节请看
更多关于JavaScript相关内容可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
下面小编就为大家带来一篇javascript运算符——逻辑运算符详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
下面小编就为大家带来一篇JavaScript 数组- Array的方法总结(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
这篇文章主要为大家详细介绍了原生js实现表格拖动选项，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
这篇文章主要介绍了JavaScript函数Call、Apply原理实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-02-02
我们在开发中常遇到一种情况,在创建一个元素之后,需要给它绑定事件,这篇文章主要给大家介绍了关于js为新添加元素添加绑定事件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
深入理解JavaScript系列（28）：设计模式之工厂模式详解
这篇文章主要介绍了深入理解JavaScript系列（28）：设计模式之工厂模式详解,工厂模式定义一个用于创建对象的接口,这个接口由子类决定实例化哪一个类,需要的朋友可以参考下2015-03-03
闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。小编之前一直糊里糊涂的，没有能够弄明白JavaScript的闭包到底是什么，有什么用，本文把自己的理解些出来分享一下，希望不理解JavaScript闭包的朋友们看了之后能够理解闭包！2016-01-01
这篇文章主要为大家详细介绍了微信小程序自定义底部导航，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
解决ie6下png透明的问题想必前端都比较清楚，虽然有很多方法，但是我觉得用JS还是最省事的方法，不管是图片还是背景图片都OK。2013-08-08
前面文章里写过一个弹出层对话框，但ie6下有bug，根本没有实现position:fixed的效果，当时没有真实ie6环境，测试疏忽，匆匆放到博客上，还让一些读者看到甚至使用，在这里表示万分抱歉啊2011-05-05
最新评论