<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <input type="text" name="" id="input" value="" />

        <h1></h1>

        <h3 id="username"></h3>

        <h4 id="age"></h4>

        <script type="text/javascript">

            var inputText = document.querySelector('#input')

            var h1 = document.querySelector('h1')

            var h3 = document.querySelector('#username')

            var age = document.querySelector('#age')

            inputText.oninput = function(){

                var value =  inputText.value

                h1.innerHTML = value;

            }

            var obj = {

//                name:'张三',

                age:14,

                set name(value){

//                    console.log(value)

                    this._name = value

                    h3.innerHTML = this._name

                },

                get name(){

                    return this._name

                },

            }

            console.log(obj)

            //setter,getter//es6,es2015标准

            //在给对象属性赋值，或者是获取对象属性的时候，会调用setter、getter两个方法

        </script>

    </body>

</html>

vue的数据双向绑定的更多相关文章

  1. Vue的数据双向绑定和Object.defineProperty()

    Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...

  2. 原生js实现 vue的数据双向绑定

    原生js实现一个简单的vue的数据双向绑定 vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时 ...

  3. vue中数据双向绑定的实现原理

    vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...

  4. 【Vue】-- 数据双向绑定的原理 --Object.defineProperty()

    Object.defineProperty()方法被许多现代前端框架(如Vue.js,React.js)用于数据双向绑定的实现,当我们在框架Model层设置data时,框架将会通过Object.def ...

  5. 对象的属性类型 和 VUE的数据双向绑定原理

    如[[Configurable]] 被两对儿中括号 括起来的表示 不可直接访问他们 修改属性类型:使用Object.defineProperty()  //IE9+  和标准浏览器  支持 查看属性的 ...

  6. vue实现数据双向绑定的原理

    一.知识准备Object.defineProperty( )方法可以直接在一个对象上定义一个新属性,或者修改一个已经存在的属性,并返回这个对象.Object.defineProperty(obj,pr ...

  7. 一、vue的数据双向绑定的实现

    响应式系统 一.概述 Vue通过设定对象属性的 setter/getter 方法来监听数据的变化,通过getter进行依赖收集,而每个setter方法就是一个观察者,在数据变更的时候通知订阅者更新视图 ...

  8. vue中数据双向绑定注意点

    最近一个vue和element的项目中遇到了一个问题: 动态生成的对象进行双向绑定是失败 直接贴代码: <el-form :model="addClass" :rules=& ...

  9. Vue的数据双向绑定原理——Object-defineProperty

    一.定义 ①方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. ②vue.js的双向数据绑定就是通过Object.defineProperty方法实现的,俗称属性拦截 ...

  10. vue v-model 数据双向绑定（笔记）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 我用阿里云的虚拟云主机，也能配置https加密吗？

    我用阿里云的虚拟云主机,也能配置https加密吗?答案是YES. 整个过程比想象中还要简单,都是一些基本的配置,虚拟主机 Web托管都可以很容易的搞定https. 首先我们要了解一下,阿里云是怎么支持 ...

  2. Mysql高手系列 - 第19篇：mysql游标详解，此技能可用于救火

    Mysql系列的目标是:通过这个系列从入门到全面掌握一个高级开发所需要的全部技能. 这是Mysql系列第19篇. 环境:mysql5.7.25,cmd命令中进行演示. 代码中被[]包含的表示可选,|符 ...

  3. aircrack-ng wifi密码破解

    wifi密码破解 步骤1:查看网卡信息 ifconfig 找到你要用到的网卡 步骤2:启动网卡监听模式 airmon-ng start wlan0 我的是wlp2s0 步骤三:查看网卡变化 wlan0 ...

  4. 自动下载zar配置管理

    maven 下载: https://maven.apache.org/ 官网 download 下载:Binary zip archive apache-maven-3.6.2-bin.zip 免安装 ...

  5. JAVA错误提示:The operation is not applicable to the current selection.Select a field which is not declared as type variable or a type that declares such fields.

    平时没怎么注意,今天用Eclipse自动生成Set Get方法时提示错误,错误信息如下: The operation is not applicable to the current selectio ...

  6. linux下修改python版本号

    修改python版本 1.查看已安装版本: /home/user$ whereis python 2.在其 home 目录下创建一个 alias(别名) user@ubuntu:/home/user$ ...

  7. 如何选择一款适合自己操作系统、Windows、Mac还是Linux？

    如何选择一款适合自己操作系统.Windows.Mac还是Linux? 作者:我们都很努力着 简介:电脑已经逐渐离不开我们生活,但是如何选择一个我们最佳,最适合的电脑操作系统就成了一些困难选择人士的一个 ...

  8. 02-35 scikit-learn库之支持向量机

    目录 scikit-learn库之支持向量机 一.SVC 1.1 使用场景 1.2 代码 1.3 参数详解 1.4 属性 1.5 方法 二.LinearSVC 三.NuSVC 四.LinearSVR ...

  9. A-03 牛顿法和拟牛顿法

    目录 牛顿法和拟牛顿法 一.牛顿法详解 1.1 无约束最优化问题 1.2 牛顿法迭代公式 1.3 牛顿法和梯度下降法 二.牛顿法流程 2.1 输入 2.2 输出 2.3 流程 三.拟牛顿法简介 更新. ...

  10. B-概率论-熵和信息增益

    目录 熵和信息增益 一.熵(Entropy) 二.条件熵(Conditional Entropy) 三.联合熵(Joint Entropy) 四.相对熵(Relative Entropy) 4.1 相 ...