vue的keydown事件小练习

最新推荐文章于 2022-12-30 10:58:38 发布

二两排骨

最新推荐文章于 2022-12-30 10:58:38 发布

阅读量704

点赞数

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

本文链接：https://blog.csdn.net/qq_34162705/article/details/125605845

版权

javascript 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

项目场景：

是想用vue改写之前的一个小练习的，实现搜索功能。
在这里插入图片描述

问题描述

功能实现就是点击百度一下或者按回车键进行搜索，点击按钮就是使用@click,而按下回车键就是使用@keydown事件。这里碰到的问题就是按键事件无法生效。

html如下

	<body>
		<div class="search-container" id="search_container">
			<div class="logo"></div>
			<div class="search">
				<input type="text" id="search_value" v-model="inputStr" />
				<button id="search_btn" @click="search" @keydown.enter="search">百度一下</button>
			</div>
		</div>
	</body>

js:

const vm = new Vue({
    el: '#search_container',
    data: {
        inputStr: ""
    },
    methods: {
        search(){
            let searchUrl = "https://cn.bing.com/search?pc=U528&q="
            let searchStr = searchUrl + this.inputStr
            window.open(searchStr)
            this.inputStr = ""
        }
    }
})

解决方案：

饶了一圈，终于解决了问题，@keydown在这里不能用在button上，要将@keydown写到文本，也就是上面的搜索框内。

	<body>
		<div class="search-container" id="search_container">
			<div class="logo"></div>
			<div class="search">
				<input type="text" id="search_value" v-model="inputStr"  @keydown.enter="search"/>
				<button id="search_btn" @click="search" >百度一下</button>
			</div>
		</div>
	</body>