js实现vue双向数据绑定

米卡小米

于 2021-11-19 09:27:32 发布

阅读量211

点赞数

分类专栏： Vue 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/cmy741741/article/details/121415228

版权

Vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue双向数据绑定v-model</title>
</head>

<body>
  <!-- 修改数据 -->
  <button>修改数据</button><br>
  <!-- 输入数据 -->
  用户名：<input type="text"><br>
  <!-- 显示数据 -->
  <output></output>

  <script>
    // 1.获取dom节点
    const btn = document.querySelector('button');
    const input = document.querySelector('input');
    const output = document.querySelector('output');

    // 2.模拟vue中的数据模型，data
    let data = {}

    // 3.给input输入框绑定监听事件
    input.addEventListener('input', function () {
      data.username = this.value
      // output.innerText = data.username
    }, false)

    // 4.修改data中的数据
    btn.addEventListener('click', function () {
      data.username = '张三'
    }, false)

    // 5.监听对象中数据的改变
    Object.defineProperty(data, 'username', {
      set(val) {
        setValue(val)
      }
    })

    // 6.封装视图更新函数
    function setValue(val) {
      output.innerText = val;
      input.value = val
    }
  </script>
</body>

</html>

米卡小米

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现vue双向数据绑定

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue双向数据绑定.
复制链接

扫一扫

专栏目录