ES6语法实现数据的双向绑定

废话不多说，直接上代码，代码有备注！！！

方式一：利用 defineProperty 方法

<div><input type="text" placeholder="请输入数据" /></div>
<!--渲染区域-->
<div class="item-box"></div>
<button>重置</button>
<script>let btn = document.querySelector("button");let inpEl = document.querySelector("input[type='text']");let itemBox = document.querySelector(".item-box");// 数据let data = {};// 监听对象的属性（数据）变化Object.defineProperty(data, "message", {get() {// 更新视图层渲染itemBox.style["background"] = "skyblue";// 将文本框内容设置为空 （重置）inpEl.value = "";return this.value;},set(v1) {// 更新视图层渲染itemBox.innerHTML = v1;// 数据层赋值this.value = v1;},});// 利用 input 标签的事件inpEl.oninput = () => (data.message = inpEl.value);btn.onclick = () => (data.message = "");
</script>

方式2：利用 Proxy 和 Reflect 方法

tool.js

// 渲染函数
let render = (renderData) => {let ul = document.querySelector("ul");let str = "";renderData.forEach((e) => {str += `<li>${e.id} - ${e.name}</li>`;});ul.innerHTML = str;
};// 数据绑定
let binding = (target, bindEl) => {return new Proxy(target, {get(target, prop) {return Reflect.get(target, prop);},set(target, prop, value) {// 判断设置的属性是否为绑定的属性if (Reflect.has(target, bindEl)) {// 渲染页面render(value);}// 更新数据Reflect.set(target, prop, value);},});
}

<!--渲染区域-->
<ul></ul>
<button>模拟向后台请求数据</button>
<!-- 导入插件包 -->
<script src="./tool.js"></script>
<script>let btn = document.querySelectorAll("button");// 数据集合let data = {list: [],b: 0,};// 将 data 中的 list 进行双向绑定data = binding(data, "list");// 初始化数据（为了方便演示）data.list = [{ id: 1, name: "产品1" },{ id: 2, name: "产品2" },{ id: 3, name: "产品3" },{ id: 4, name: "产品4" },];// 发送请求btn[0].onclick = () => {// 向后端请求回来的数据let res = [{ id: 5, name: "产品5" },{ id: 6, name: "产品6" },{ id: 7, name: "产品7" },{ id: 8, name: "产品8" },];// 将后端数据放到数据集合中的 listdata.list = data.list.concat(res);};
</script>

欢迎访问我的个人博客

ES6语法实现数据的双向绑定相关推荐

React入门---事件与数据的双向绑定-9
上一节中,我们是从父组件给子组件传送数据,要实现事件与数据的双向绑定,我们来看如何从子组件向父组件传送数据; 接触之前,我们看一些里面函数绑定的知识: 例:通过点击事件改变state的age属性值: ...
【Vue】—数据的双向绑定v-model
[Vue]-数据的双向绑定v-model
AngularJS数据的双向绑定
数据的双向绑定 Angular实现了双向绑定机制.所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面. 一个最简单的示例就是这样: <div ng-controlle ...
【Vue2 组件间数据的双向绑定】
组件间数据的双向绑定一.通过自定义事件二.通过v-model 三.通过.sync修饰符四.provide和inject 代码中的p-8,mt-8等,都是自己写的工具类,复制代码的同学,可以自行删 ...
vue3数据的双向绑定
vue3关于数据的双向绑定一.script setup 现在,没必要把数据写到data里面,或者是写一个setup函数,再进行return出去. import进来的组件,可以直接在页面中使用,不再需 ...
Vue之数据的双向绑定
在vue中实现数据双向绑定的核心在于v-model 示例: <input type="text" name=" " v-model="userN ...
v-model实现数据的双向绑定
Vue.js提供了v-model指令,用于在表单类元素上双向绑定数据, 比如,在数据框上使用时,输入的内容会实时映射到绑定的数据上. <div id="app">< ...
微信小程序input数据的双向绑定
先来看一下html代码再来看下js代码这种绑定实例就是给input的一个bindinput属性,指定了一个方法名字.如果想要实现双向绑定,必须使用this.setdata这个方法. 注意!我们在发 ...
Vue中实现父子组件的数据的双向绑定（vue.sync的用法）
项目场景: 前两天日常开发时,遇到需要父子组件双向绑定的问题,出现了一些BUG,但是考虑到组件的可维护性,vue中是不允许子组件改变父组件传的props值的问题描述: 问题场景就是子组件传递数据给父 ...
angularjs input标签用一个日期插件后数据不能双向绑定了_微信如何定时发朋友圈？（最方便最好用的办法！）...
微信怎么发朋友圈(微信如何定时发朋友圈)作为一个运营新媒体的小编,很多情况下,我都会遇到定时发文的情况,对于我来说,定时发文很简单. 只要将文案编辑好,使用平台的定时发文功能就可以,所以,我就想,微信 ...

ES6语法实现数据的双向绑定

废话不多说，直接上代码，代码有备注！！！

ES6语法实现数据的双向绑定相关推荐

最新文章

热门文章