介绍 & lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt; title>原生js实现简单的双向数据绑定& lt;/title>
& lt;/head>
& lt; body>
& lt;输入类型=皌ext"id=皍serName"比;
& lt;跨度id=皍Name"祝辞& lt;/span>
& lt; script>
var obj={
pwd:“1234”;
};//主要使用到了获取和设置方法,最为关键
Object.defineProperty (obj,“userName", {
得到:函数(){
console.log(& # 39;得到init # 39;);
},
设置:函数(val) {
console.log(“设置init");
. getelementbyid (“uName") .innerText=val;
. getelementbyid (“userNmae") value=https://www.yisu.com/zixun/val;
}
});
. getelementbyid(“用户名”).addEventListener(“弹起”,函数(事件){
obj.userName=event.target.value;
}
)>
小编给大家分享一下js双向数据绑定的实现方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
首先我们了解一下单向数据绑定和双向数据绑定是什么?
<强>单向数据绑定是什么?
数据模型(模块)和视图(视图)之间的单向绑定。
需要我们先写好模板,然后把模板和数据(可能来自后台)整合到一起形成HTML代码,然后把这段HTML代码插入到文档流里面,简单的来说就是DOM操作HTML元素。
单向数据绑定的缺点:一旦HTML代码生成好后,就没有办法再进行改变了,如果有新的数据出现,那就必须要先把之前的HTML代码删掉,然后重新把新的数据和模板一起整合形成新HTML的代码,再插入到文档流中。
<强>双向数据绑定是什么?
数据模型和视图之间的双向绑定。
当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化,可以这样说用户在视图上的修改会自动同步到数据模型中去,数据模型也是同样的变化。
双向数据绑定的优点:无需和单向数据绑定那样进行CRUD(创建、检索、更新、删除)操作,双向数据绑定最常应用在就表单上,这样当用户在前端页面完成输入后,不用任何操作,我们就已经拿到了用户输入好的数据,并放到数据模型中了。
<强>原生js实现简单的双向数据绑定
代码示例:& lt; span>标签内显示的内容随用户输入的内容而改变