js最简单的双向绑定实例讲解

来源：动视网责编：小采时间：2020-11-27 22:22:21

js最简单的双向绑定实例讲解

js最简单的双向绑定实例讲解:把代码复制放到页面里面运行看一下效果就好了 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Title</title> </head> <body>

推荐度：

点击下载本文 文档为doc格式

导读js最简单的双向绑定实例讲解:把代码复制放到页面里面运行看一下效果就好了 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Title</title> </head> <body>

把代码复制放到页面里面运行看一下效果就好了

<!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框内的值也会跟着改变，也会触发事件，获取新值

以上这篇js最简单的双向绑定实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。