vue表格搜索的时候回车按键

最新推荐文章于 2024-08-31 17:15:48 发布

.ლ.

最新推荐文章于 2024-08-31 17:15:48 发布

阅读量430

点赞数 7

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/lovelylittlecub/article/details/134738291

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这篇文章介绍了如何在Vue组件中使用v-model绑定文本输入框，并利用keyup.enter事件监听器实现当用户按下Enter键时触发searchData方法，以实现搜索功能。

摘要由CSDN通过智能技术生成

<template>
    <div>
        <input type="text" placeholder="请输入搜索内容" v-model="currentLevel">
        <img src="xx/search.png"  @click="searchData()"             
           @keyup.enter="keyDown($event)"  />
    </div>
</template>
<script>
    export default {
        data() {
            return {
                currentLevel: ""
            }
        },
        mounted() {
            window.addEventListener("keydown", this.keyDown);
        },
        methods: {
            keyDown(e) {
                if (e.key == 'Enter') {
                    this.searchData();
                    e.preventDefault(); // 去掉默认的换行
                }
            },
            searchData() {
    
            }
        },
        beforeDestroy: function() {
            window.addEventListener("keydown", this.keyDown);
        }
    }
</script>