v-model指令简易实现

最新推荐文章于 2024-02-27 16:07:36 发布

JQ...

最新推荐文章于 2024-02-27 16:07:36 发布

阅读量344

点赞数 2

文章标签： vue

本文链接：https://blog.csdn.net/weixin_42201272/article/details/105767780

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <input type="text" v-my="msg" />
    </div>
    <script>
      Vue.directive("my", {
        // 获取dom对象绑定input事件
        inserted: function (el, binding, vnode) {
          if (!binding.value) {
            return console.error("v-my没有被赋值");
          }
          // 默认值为msg
          el.value = binding.value;
          el.oninput = function (e) {
            console.log(vnode.context.msg);

            vnode.context.msg = e.target.value;
          };
        },
        // 虚拟dom节点更新时调用
        update: (el, binding, vnode) => {
          el.value = binding.value;
        },
      });
      var vm = new Vue({
        el: "#app",
        data: {
          msg: "bbb",
        },
      });
    </script>
  </body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

JQ...

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-model指令简易实现

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Docum...
复制链接

扫一扫