recherche

Maison >interface Web >js tutoriel >Comment implémenter une liaison unidirectionnelle dans js (code ci-joint)

Comment implémenter une liaison unidirectionnelle dans js (code ci-joint)

不言
不言original
2018-07-17 17:30:012023parcourir

Cet article présente principalement comment implémenter la liaison unidirectionnelle en js (avec du code). Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer. >Connexe recommandé : 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <input type="text" id="a">
  <span id="b"></span>
  <script>
    // var obj = {};
    // Object.defineProperty(obj,"hello",{
    //   set: () => {
    //     console.log("get方法被调用");
    //   },
    //   get: (val) => {
    //     console.log("se方法被调用"+val);
    //   }
    // })
    let obj = {};
    //Object.defineProperty(obj, prop, descriptor)
    // obj 要在其上定义属性的对象。
    // prop 要定义或修改的属性的名称。
    // descriptor 将被定义或修改的属性描述符。
    Object.defineProperty(obj, &#39;hello&#39;, {    //这里定义obj.hello为完成修改的属性
      set: (newVal) => {                     //当obj.hello的属性发生变化,就会以参数传进来 
        document.getElementById(&#39;a&#39;).value = newVal;    //set触发给a值同时把值给b实现绑定
        document.getElementById(&#39;b&#39;).innerHTML = newVal;
        obj.hello
      },
      get: ()=> {
        console.log("hahahaah");  
      }
    });
    //addEventListener() 方法用于向指定元素添加事件句柄。
    //element.addEventListener(event, function, useCapture)
    //event 所有 HTML DOM 事件
    //function 指定事件触发时执行的函数。
    //useCapture 指定事件是否在捕获或冒泡阶段执行。
    document.addEventListener(&#39;keyup&#39;, (e) => { //监听键盘的按键松开的事件
      console.log(e);
      obj.hello = e.target.value; //将监听到了变化的值给obj.hello,让他触发set属性
    })
  </script>
</body>

</html>

Comment implémenter la liaison de données bidirectionnelle dans js

Explication détaillée de la liaison bidirectionnelle dans vue.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

vue.js JS
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：À propos de l'opération d'ajout et de soustraction de classes dans jQuery (avec code)Article suivant：À propos de l'opération d'ajout et de soustraction de classes dans jQuery (avec code)

Articles Liés

Voir plus