vue中绑定键盘事件,实现按下键盘上下键实现li标签背景色的切换小demo
大概就是实现一个这样的功能,键盘按下上下键,li标签红色背景可以上下切换哈因为朋友工作中碰见的一个小问题,最后写一个简单的小demo<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><script src="j...
·
大概就是实现一个这样的功能,键盘按下上下键,li标签红色背景可以上下切换哈
因为朋友工作中碰见的一个小问题,最后写一个简单的小demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<style>
li{
height: 40px;
line-height: 40px;
}
.active{
background-color: #f00;
}
</style>
<body>
<div id="app">
<ul>
<li v-for="item in list" :key="item" :class="{active:index==item}">
{{item}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
list:[1,2,3,4,5],
index:1
},
mounted(){
document.addEventListener('keydown',(e)=>{
if(e.keyCode==38){
if(this.index>1){
this.index--;
}else{
this.index=5;
}
}else if(e.keyCode==40){
if(this.index<5){
this.index++;
}else{
this.index=1;
}
}
})
}
})
</script>
</html>
更多推荐
已为社区贡献38条内容
所有评论(0)