如何利用js实现Vue2.0中数据的双向绑定功能

发布时间:2021-07-19 16:54:12 作者:chen
来源:亿速云 阅读:251

本篇内容主要讲解“如何利用js实现Vue2.0中数据的双向绑定功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何利用js实现Vue2.0中数据的双向绑定功能”吧!

Object.defineProperty了解

语法:

Object.defineProperty(obj, prop, descriptor)

obj和prop很好理解 比如我们定义一个变量为

const o = {
    name:'xbhog'
}

其中obj指的就是o,prop指的就是o.name 下面我们主要看看descriptor

descriptor  目标对象属性的一些特征(是一个对象)
   descriptor  下有6个参数
 参数1:
     value:属性值
 参数2:
   writable:对象属性值是否可以被修改  true允许  false不允许
 参数3:
   configurable:对象属性是否可以被删除 true允许  false不允许
 参数4:
   enumerable:对象属性是否可被枚举
 参数5:
     get():是个函数,当访问该属性的时候,函数自动调用,函数返回值就是该属性的值
 参数6:
     set():是个函数,当修改该属性的时候,函数自动调用,函数有且只有一个参数,赋值的新值

注意:描述符里的value属性 writable属性 与 get属性 set属性是互斥的关系,只能存在一个

了解了前置知识,我们来实现Vue中的v-model的双向绑定

先看实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过js实现数据的双向绑定</title>
</head>
<body>
    
<input type="text"/><br>
<h2>你好:<span>更新数据</span></h2>


<!-- 通过js实现数据的双向绑定 -->
<script>
	// 方法返回文档中与指定选择器或选择器组匹配的第一个 HTMLElement对象
    var ipt =document.querySelector('input');
    var p = document.querySelector('span');
	
	
    var data = {name:""};
	/* 
	    oninput 事件在用户输入时触发。
	    该事件在 <input> 或 <textarea> 元素的值发生改变时触发。
	 */
    ipt.oninput = function(){
	// 将ipt.value中的值传给data.name的value
        data.name = ipt.value;
    }
    //劫持ipt.value
    Object.defineProperty(data,"name",{
    // 数据订阅
    get(){
        return ipt.value;  //当访问的时候会调用get方法
    },
    // 数据劫持
	//name:value
    set(value) {
        p.innerHTML = value;
        ipt.value = value;
    }   
})
</script>
</body>
</html>

首先我们通过document.querySelector获取input以及span标签的Html对象,在定义一个data对象,属性name先为空。

使用事件监听oninput来监听用户输入(该事件在 <input> 或 <textarea> 元素的值发生改变时触发)。

将ipt.value中的值传给data.name的value;

data.name = ipt.value;

利用Object.defineProperty劫持用户输入的数据。

Object.defineProperty(data,"name",{
    // 数据订阅
    get(){
       return ipt.value;  //当访问data.name时候会调用get方法,调用ipt.value获取当前value的值
    },
    // 数据劫持
    set(value) {   //设置数据的时候会自动调用set方法
        p.innerHTML = value;
        ipt.value = value;
    }

看效果比较明显:

set方法:

如何利用js实现Vue2.0中数据的双向绑定功能

get方法:

如何利用js实现Vue2.0中数据的双向绑定功能

最后实现效果:

如何利用js实现Vue2.0中数据的双向绑定功能

参考资料:

到此,相信大家对“如何利用js实现Vue2.0中数据的双向绑定功能”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

推荐阅读:
  1. 使用Nuxt.js怎么实现数据双向绑定
  2. Vue2.0中怎么实现数据的双向绑定

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue2.0 js

上一篇:javascript如何跳出循环

下一篇:python中PaddleOCR库的用法

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》