go_vFan 2022-04-12 10:02 采纳率: 0%
浏览 138

请问为什么input使用类名获取value无法实时获取最新value值

  1. 问题:在input文本框内输入内容时,使用input.value无法动态获取到值
  2. 代码

<body>
    <div class="app">
        <input class="search" type="text" v-on:keyup="clear" value="normal">
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
        var search = document.querySelector('.search');
        const vm = new Vue({
            el: '.app',
            methods: {
                clear(e) {
                    //用类名获取
                    console.log(search);
                    console.log(search.value);
 
                    // console.log(e.target);
                    // console.log(e.target.value);
                }
            }
        });
    </script>


3.无论向Input内输入什么,都还是默认值normal

img

4.而当我使用e.target.value来获取就可以动态获取到input内的值

img

5.请问这是什么原理,为什么用input.value不能获取到动态值?

  • 写回答

2条回答 默认 最新

  • 萝卜村的白菜 2022-04-12 11:12
    关注

    刚开始获取一次input的原生对象所以search的值为normal,而在页面上输入框上输入的值只是视图上的变化,所以在vue内部获取的是vue记录的第一次真实dom的值。这是个人理解,如果有不对的地方,还请纠正

    评论

报告相同问题?

问题事件

  • 创建了问题 4月12日

悬赏问题

  • ¥60 更换迈创SOL6M4AE卡的时候,驱动要重新装才能使用,怎么解决?
  • ¥15 让node服务器有自动加载文件的功能
  • ¥15 r语言蛋白组学相关问题
  • ¥15 Python时间序列如何拟合疏系数模型
  • ¥15 求学软件的前人们指明方向🥺
  • ¥50 如何增强飞上天的树莓派的热点信号强度,以使得笔记本可以在地面实现远程桌面连接
  • ¥20 双层网络上信息-疾病传播
  • ¥50 paddlepaddle pinn
  • ¥20 idea运行测试代码报错问题
  • ¥15 网络监控:网络故障告警通知