vue双向绑定

最新推荐文章于 2024-04-22 09:07:57 发布

chuan_chuange

最新推荐文章于 2024-04-22 09:07:57 发布

阅读量226

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_33922874/article/details/122238434

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

dva 初步认识

- Object.defineProperty(obj, property, des)
- Object.defineProperties(obj,props)

在🐂客刷前端题刷到一个关于双向绑定的，全忘记了，后来查阅资料完成题目，记录下来，加深印象！

监听对象属性的变化
当"person"对象属性发生变化时，页面中与该属性相关的数据同步更新
将输入框中的值与"person"的"weight"属性绑定且当输入框的值发生变化时，页面中与该属性相关的数据同步更新

/**
题干要求大概就是输入框的值跟person对象的weight属性实现双向绑定(对象的weight属性变，输入框的值就变，反之，输入框的值变化，对象属性也跟着变);
*/
{sex: '男', age: '25', name: '王大锤', height: 28, weight: 32};

在这里插入图片描述

提到双向绑定，第一时间应该想到的就是Object.defineProperty和Object.defineProperties，区别就是一个是设置单个属性和另一个是设置多个属性

Object.defineProperty(obj, property, des)

这个方法包含三个参数，第一个参数是要作用的对象，第二个参数是要修改的属性，第三个是修改的描述也是一个对象，这几个参数的详细描述可以看这个地址。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
而要实现双向绑定最重要的就是第三个参数里面的set方法，该方法的返回值也就是你要更改的值

// 小示例
<input id='inp'/>
<div id='box'></div>

let inp = document.getElementById('inp');
let box= document.getElementById('box');
let obj = {};
obj.name = 'chuan_chuange';
Object.defineProperty(obj,'name',{
	set:function(value){
		box.innerText = value;
		inp.value = value;
		val = value;
	}
})
inp.oninput = (e) => {
	obj.name = e.target.value;
}
这样就实现了简单的双向绑定啦

Object.defineProperties(obj,props)

Object.defineProperties则适用于多个属性一起更，第一个参数依旧是要作用的对象，第二个参数是你要更改的属性，参考这里
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
下面的代码就是多个属性的示例，也是上面题目的答案

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <style>
      ul {
        list-style: none;
      }
    </style>
    <input type="text" />
    <ul></ul>

    <script>
      var ul = document.querySelector("ul");
      var person = {
        sex: "男",
        age: "25",
        name: "王大锤",
        height: 28,
        weight: 32,
      };
      var inp = document.querySelector("input");
      inp.value = person.weight;
      const _render = () => {
        var str = `<li>姓名：<span>${person.name}</span></li>
                           <li>性别：<span>${person.sex}</span></li>
                           <li>年龄：<span>${person.age}</span></li>
                           <li>身高：<span>${person.height}</span></li>
                           <li>体重：<span>${person.weight}</span></li>`;
        ul.innerHTML = str;
        inp.value = person.weight;
      };
      _render(ul);
      // 补全代码
      var spans = document.getElementsByTagName("span");
      var inp = document.getElementsByTagName("input")[0];

      Object.defineProperties(person, {
        sex: {
          set: function (value) {
            spans[1].innerHTML = value;
          },
        },
        age: {
          set: function (value) {
            spans[2].innerHTML = value;
          },
        },
        name: {
          set: function (value) {
            spans[0].innerHTML = value;
          },
        },
        height: {
          set: function (value) {
            spans[3].innerHTML = value;
          },
        },
        weight: {
          set: function (value) {
            spans[4].innerText = value;
            inp.value = value;
          },
        },
      });
      inp.oninput = function () {
        person.weight = this.value;
      };
    </script>
  </body>
</html>

chuan_chuange

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue双向绑定

dva 初步认识Object.defineProperty(obj, property, des)Object.defineProperties(obj,props)在????客刷前端题刷到一个关于双向绑定的，全忘记了，后来查阅资料完成题目，记录下来，加深印象！监听对象属性的变化当"person"对象属性发生变化时，页面中与该属性相关的数据同步更新将输入框中的值与"person"的"weight"属性绑定且当输入框的值发生变化时，页面中与该属性相关的数据同步更新/**题干要求大概就是输入框的
复制链接

扫一扫