Vue 键盘事件
Vue2键盘事件：keydown/keyup...
1.使用
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="vue.js"></script> <script type="text/javascript">
window.onload = function(){
var vm = new Vue({
el:'#box',
methods:{
show:function(ev){
if(ev.keyCode == 13){
alert('你按回车键了');
}
},
}
});
}
</script>
</head>
<body>
<div id="box">
<input type="text" placeholder="请输入" @keyup="show($event)"> <input type="text" placeholder="请输入" @keyup.13="show($event)">
</div>
</body>
</html>
当按下键盘的时候，执行show方法，然后再去执行相应的业务。
两个input的效果都是一样的 如果安13 也就是按键 enter 才会执行弹窗！！
@keyup.13 回车
@keyup.enter 回车
@keyup.left 左键
@keyup.right 右键
@keyup.up 上键
@keyup.down 下键
@keyup.delete 删除键
Vue 键盘事件的更多相关文章
- Vue键盘事件
键盘事件一 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...
- vue 键盘事件keyup/keydoen
使用: <!DOCTYPE html> <html> <head> <title></title> <meta charset=&qu ...
- Vue2键盘事件
这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记,学习一下Vue键盘事件 键盘事件 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 1 ...
- vue学习笔记（一）关于事件冒泡和键盘事件 以及与Angular的区别
一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...
- vue添加页面键盘事件
我司开发项目,用的是vue+elementUI,做登陆页面的时候,点击enter键的时候要实现和点击登陆按钮一样的功能,所以就百度了一下,于是一通百度之后,就在点击按钮上面直接添加了@keyup.en ...
- vue使用element-ui的el-input监听不了键盘事件解决
vue使用element-ui的el-input监听不了键盘事件,原因应该是element-ui自身封装了一层div在input标签外面,把原来的事件隐藏了,所以如下代码运行是无响应的: <el ...
- React对比Vue（03 事件的对比，传递参数对比，事件对象，ref获取DOM节点，表单事件，键盘事件，约束非约束组件等)
import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...
- vue教程1-05 事件 简写、事件对象、冒泡、默认行为、键盘事件
vue教程1-05 事件 简写.事件对象.冒泡.默认行为.键盘事件 v-on:click/mouseover...... 简写的: @click="" 推荐 事件对象: @clic ...
- 29.VUE学习之--键盘事件.键盘修饰符的实例讲解
键盘事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
随机推荐
- js 控制
js 制动控制 代码 是 :setInterval(function(){$(".egg").click();},1000); 使用方法:调出浏览器放控制台(console),一般 ...
- WebService部署服务器调试时提示 “测试窗体只能用于来自本地计算机的请求”解决方法
原因:没有开启服务器访问权限! 解决方法: 在web.config的<system.web></system.web>中加入如下配置节内容即可解决 <webService ...
- WPF 资源应用
对资源的应用,有好多方法,以下是一些应用,可以参考 1.静态资源: 2.动态资源: 3.项目面板中的资源: 4.图片.声音等资源
- Matlab 之 im2col 【转】
函数原型: B=im2col(A,[m n],block_type) 功能:将矩阵A分为m×n的子矩阵,再将每个子矩阵作为B的一列 (1)当block_type为distinct时,将A分解为互不重叠 ...
- 【bzoj1798】[Ahoi2009]Seq 维护序列seq 线段树
题目描述 老师交给小可可一个维护数列的任务,现在小可可希望你来帮他完成. 有长为N的数列,不妨设为a1,a2,…,aN .有如下三种操作形式: (1)把数列中的一段数全部乘一个值; (2)把数列中的一 ...
- [转载]看看大牛们是怎样获得英文综述（reviews）的?
对于做实验的童鞋来说,平时看综述必不可少,可是如何获得自己想要的却并不是一件容易的事情,这里整理并推荐几种行之有效的方法: 1. http://www.annualreviews.org/,这是一个顶 ...
- [LOJ2540] [PKUWC2018] 随机算法
题目链接 LOJ:https://loj.ac/problem/2540 Solution 写的时候脑子不太清醒码了好长然后时间\(LOJ\)垫底... 反正随便状压\(dp\)一下就好了,设\(f[ ...
- 51NOD 1149：Pi的递推式——题解
http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1149 F(x) = 1 (0 <= x < 4) F(x) ...
- nowcoder OI 周赛 最后的晚餐（dinner） 解题报告
最后的晚餐(dinner) 链接: https://www.nowcoder.com/acm/contest/219/B 来源:牛客网 题目描述 \(\tt{**YZ}\)(已被和谐)的食堂实在是太挤 ...
- HDOJ(HDU).3466 Dividing coins ( DP 01背包 无后效性的理解)
HDOJ(HDU).3466 Dividing coins ( DP 01背包 无后效性的理解) 题意分析 要先排序,在做01背包,否则不满足无后效性,为什么呢? 等我理解了再补上. 代码总览 #in ...