input输入框的input事件

input输入框的input事件首先是一个坑,在IE和360浏览器中页面刷新会执行一遍input事件,在其他浏览器就没有,所以会有很大问题,导致做的自动补全列表直接显示,刷新页面也不能隐藏。<inputtype=”text”class=”comHeaderBanSearchSearchfl”placeholder=”请输入关键字查询”v-model=”inputVal”@keyup.enter=”sear…

大家好,又见面了,我是你们的朋友全栈君。

首先是一个坑,在IE和360浏览器中页面刷新会执行一遍input事件,在其他浏览器就没有,所以会有很大问题,导致做的自动补全列表直接显示,刷新页面也不能隐藏。

<input type="text" class="comHeaderBanSearchSearch fl" placeholder="请输入关键字查询" v-model="inputVal" @keyup.enter="searchBtn">

//在data中 我直接把inputVal的值拿到路由的值 这样页面一进来就不用走watch了 这样就避免了在created中赋值 是inputVal变化从而进行监听 还会走自动补全的函数了
data(){
return {
inputVal:this.$route.query.searchWord?this.$route.query.searchWord:'',
}
}

//监听 watch中
watch:{
inputVal(newVal,oldVal){
        this.inputChange();
      },
},
methods:{
      /*自动补全数据 methods*/
      inputChange() {
        if(this.inputVal!=''){
          getsuggestAPI({
            term: this.inputVal,
            num: 8
          }).then(res => {
            if (res.data.status) {
              this.suggest = res.data.data;
              this.issuggest=true;
              this.$store.commit('suggest',this.issuggest)
            }
          })
        }else{
          this.suggest=[];
          this.issuggest=false;
          this.$store.commit('suggest',this.issuggest)
        }


      },
},



 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/133646.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 正确安全的下载 devcon

    正确安全的下载 devcon

  • 用户态与内核态之间切换详解[通俗易懂]

    用户态与内核态之间切换详解[通俗易懂]用户态切换到内核态CPU中有一个标志字段,标志着线程的运行状态。用户态和内核态对应着不同的值,用户态为3,内核态为0.每个线程都对应着一个用户栈和内核栈,分别用来执行用户方法和内核方法。用户方法就是普通的操作。内核方法就是访问磁盘、内存分配、网卡、声卡等敏感操作。当用户尝试调用内核方法的时候,就会发生用户态切换到内核态的转变。切换流程:1、每个线程都对应这一个TCB,TCB中有一个TSS字段,存储着线程对应的内核栈的地址,也就是内核栈的栈顶指针。2、因为从用户态切换到内核态时,需要将用户态.

  • 水晶易表 Xcelsius 2008 安装指南 完美支持office2010(亲手体验)

    水晶易表 Xcelsius 2008 安装指南 完美支持office2010(亲手体验)

    2021年12月15日
  • vue漂亮的树控件_前端树形控件

    vue漂亮的树控件_前端树形控件实现效果与原理我们希望实现鼠标移动至树型结构的结点上就显示按钮,移出就隐藏按钮实现原理:是通过@mouseenter和@mouseleave两个属性来控制鼠标hover的效果,再配合v-sho

  • 永恒之蓝漏洞复现(MS17010)

    永恒之蓝漏洞复现(MS17010)永恒之蓝实验(MS17010)1.概念永恒之蓝是指2017年4月14日晚,黑客团体ShadowBrokers(影子经纪人)公布一大批网络攻击工具,其中包含“永恒之蓝”工具,“永恒之蓝”利用Windows系统的SMB漏洞可以获取系统最高权限。5月12日,不法分子通过改造“永恒之蓝”制作了wannacry勒索病毒。恶意代码会扫描开放445文件共享端口的Windows机器,无需用户任何操作,只要开机上网,不法分子就能在电脑和服务器中植入勒索软件、远程控制木马、虚拟货币挖矿机等恶意程序。2.什么是ARTA

  • 新版大官场–男人是山

    新版大官场–男人是山一部官场小说,写的有点虚无缥缈,不够真实。[@more@]这本小说的写法有点发散,期间有些年份的跨度不够合理,中规中矩,闲时可看看。…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号