其他分享
首页 > 其他分享> > 查漏补缺——说说@keyup.enter

查漏补缺——说说@keyup.enter

作者:互联网

问题

如题所示

答案

vue中输入框事件的使用——@input、@keyup.enter、@change、@blur

相关源码如下:

<div class="header-search">
        <i class="iconfont iconsearch" @click.stop="click"></i>
        <input ref="searchInput" :class="{'show':show}" v-model="searchValue" type="text" @click.stop="" @keyup.enter="search"/>
    </div>
search(){
                // console.log(this.searchValue)
                this.$router.push({name:'search',params:{words:this.searchValue}});
                this.close()
            }

按照上面的源码,在输入框输入的时候,就调用search这个函数,这个函数的作用应该是将输入框输入的文字和search这个路由重新拼接成一个新的地址(url)

大致做成来的效果是这样的:

image

标签:查漏,keyup,searchValue,search,输入框,源码,enter
来源: https://www.cnblogs.com/Huang-zihan/p/16406999.html