Rumah > Artikel > hujung hadapan web > 在js中如何实现双向绑定
在js中如何实现双向绑定
- 亚连asal
- 2018-06-14 10:36:392219semak imbas
下面我就为大家分享一篇js最简单的双向绑定实例讲解，具有很好的参考价值，希望对大家有所帮助。
把代码复制放到页面里面运行看一下效果就好了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="myinput" >
<script>
function watch(obj,key,callback) {
var old = obj[key];
Object.defineProperty(obj,key,{
set:function(val){
var oldVal = old;
old = val;
callback(val,oldVal,this);
},
get:function(){
return old;
}
});
}
var input = document.getElementById("myinput");
var obj = {};
watch(obj, "input",function (val) {
input.value = val;
console.log("这里是不管view层，还是module层修改后的回调，最后设置的值是"+val);
});
input.onkeyup = function () {
obj.input = input.value;
};
</script>
</body>
</html>代码测试
修改了input内的值，会看到控制台打印出新的值
在控制台修改obj.input的值，input框内的值也会跟着改变，也会触发事件，获取新值
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
Atas ialah kandungan terperinci 在js中如何实现双向绑定. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Angular CLI怎样使用蓝本生成代码Artikel seterusnya：vue+mixin节省代码量