web-explore-demo/source/数据双向绑定/index.html at master · vannvan/web-explore-demo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <body>
      <p>input1=><input type="text" id="input1" /></p>
      <p>
        input2=>
        <input type="text" id="input2" />
      </p>
      <div>
        我每次比input1的值加1=>
        <span id="span"></span>
      </div>
    </body>

    <script type="text/javascript">
      var oInput1 = document.getElementById("input1");
      var oInput2 = document.getElementById("input2");
      var oSpan = document.getElementById("span");
      var obj = {};
      Object.defineProperties(obj, {
        val1: {
          configurable: true,
          get: function () {
            oInput1.value = 0;
            oInput2.value = 0;
            oSpan.innerHTML = 0;
            return 0;
          },
          set: function (newValue) {
            oInput2.value = newValue;
            oSpan.innerHTML = Number(newValue) ? Number(newValue) : 0;
          },
        },
        val2: {
          configurable: true,
          get: function () {
            oInput1.value = 0;
            oInput2.value = 0;
            oSpan.innerHTML = 0;
            return 0;
          },
          set: function (newValue) {
            oInput1.value = newValue;
            oSpan.innerHTML = Number(newValue) + 1;
          },
        },
      });
      oInput1.value = obj.val1;
      oInput1.addEventListener(
        "keyup",
        function () {
          obj.val1 = oInput1.value;
        },
        false
      );
      oInput2.addEventListener(
        "keyup",
        function () {
          obj.val2 = oInput2.value;
        },
        false
      );
    </script>
  </body>
</html>