vue实时监听input输入框中输入内容

绝地灬酷狼 2023-02-17 03:47 34阅读 0赞

### 1：根据官方文档change 输入框内容变化时的回调 ###

<a-input-search style="width: 15%;height:3%;margin-top: 15px;margin-left: 10px;" placeholder="input search text"  @change="onChange">
              <a-button slot="enterButton"  >
                搜索
              </a-button>
     </a-input-search>

methods: { 
          onChange(e){ 
            const {  value } = e.target;
            console.log("检测到变化"+value);
          },
    }

![在这里插入图片描述][20200612095039436.png_pic_center]  
![在这里插入图片描述][20200612095108492.png_pic_center]

### 2：总结，你只要在你的输入框增加一个@change事件就可以随时监听输入框的值了！！！ ###

### 3:如果想把实时数据存入data return共整个页面随时调用 ###

data() { 
          return { 
              inputData:{ },//把input输入框的值存入这里共整个页面随时调用
            }
          }
        },

onChange(e){ 
            var {  value } = e.target;
            this.inputData = {  value }//把数据存入inputData
            console.log(this.inputData)
            console.log("检测到变化"+value+JSON.stringify(this.inputData.value) );
          },

[20200612095039436.png_pic_center]: https://img-blog.csdnimg.cn/20200612095039436.png#pic_center
[20200612095108492.png_pic_center]: https://img-blog.csdnimg.cn/20200612095108492.png#pic_center

发表评论取消回复

表情：

评论列表（有 0 条评论，34人围观）

还没有评论，来说两句吧...

相关阅读

相关监听input、textarea输入框值变化

使用jquery的代码如下： $(document).on('focus', 'input', function() { /

刺骨的言语ヽ痛彻心扉/ 2023年10月06日 15:14/ 0 赞/ 19 阅读

相关 vue中 input输入框的封装

在vue中会将常用的组件进行封装，如下是input输入框的一个封装。 <template> <div class="text_group">

﹏ヽ暗。殇╰゛Y/ 2023年02月17日 06:24/ 0 赞/ 140 阅读

相关 vue实时监听input输入框中输入内容

1：根据官方文档change 输入框内容变化时的回调 <a-input-search style="width: 15%;height:3%;margin-top

绝地灬酷狼/ 2023年02月17日 03:47/ 0 赞/ 35 阅读

相关实时监听input输入框中的内容以及失去焦点的时候再去获取输入框中的值

1、实时监听input的输入值伴随着输入框中内容变化，实时打印输入框中绑定变量的值 <input (keyup)="onChange()" [(ngModel)]

深碍√TFBOYSˉ_/ 2022年12月23日 09:51/ 0 赞/ 175 阅读

相关 vue监听input输入

想用vue监听input的输入，但是又懒得引入jquery，去网上查了资料，才找到方法。实现方法如下。 ![70][]用v-on来绑定，然后就可以动态获取input的值了

以你之姓@/ 2022年05月19日 03:39/ 0 赞/ 308 阅读

相关 Js（Jquery）实时监听input输入框值的变化

效果图 ![在这里插入图片描述][70] Js写法 <!DOCTYPE html> <html lang="en"> <head>

向右看齐/ 2022年05月09日 06:24/ 0 赞/ 2956 阅读

相关监听input输入框键盘输入的方法

html <div class="div1"> <input type="text" placeholder="输入姓名" maxlength="5" cl

缺乏、安全感/ 2021年11月29日 16:44/ 0 赞/ 594 阅读

相关 Js/jQuery实时监听input输入框值变化

前言在做web开发时候很多时候都需要即时监听输入框值的变化，以便作出即时动作去引导浏览者增强网站的用户体验感。而采用onchange时间又往往是在输入框失去焦点（onb

淡淡的烟草味﹌/ 2021年09月14日 14:32/ 0 赞/ 449 阅读

相关 Vue中的input输入框无法输入

Vue中的input输入框无法输入 Vue中的input输入框无法输入刚开始以为是键盘的问题，然后发现别的地方都可以输入，唯独这个input无法输入，可能因为我循环

心已赠人/ 2021年09月13日 17:46/ 0 赞/ 846 阅读

相关 js实现实时监听input输入框值的变化

要想实现实时监听input输入框值的变化的效果，只需要让input元素监听两个事件：`input`和`propertychange`，然后调用对应的js监听函数即可。先使

痛定思痛。/ 2021年06月12日 20:36/ 0 赞/ 1629 阅读