原生JS实现vue中双向数据绑定

最新推荐文章于 2022-07-18 16:33:20 发布

上头upup

最新推荐文章于 2022-07-18 16:33:20 发布

阅读量229

点赞数

分类专栏： JavaScript Vue

本文链接：https://blog.csdn.net/qq_45802159/article/details/104875631

版权

Vue 同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

JavaScript

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="text" id="input">
  <span id="span"></span>
</body>
<script>
  const input = document.getElementById('input')
  const span = document.getElementById('span')

  const obj = {
    value: '111'
    ,
    get val() {
      return this.value
    },
    set val(val) {
      this.value =val
    }
  }

    input.value = obj.val
    span.innerHTML = obj.value 

  input.addEventListener('input', function(e) {
    obj.val = e.target.value
    span.innerHTML = obj.value 
  })
</script>
</html>