Vue键盘事件
键盘事件一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>键盘事件一</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="vuetext">
<h1>键盘事件一</h1>
<label>姓名：</label>
<!--按回车触发事件-->
<input ref="name" type="text" v-on:keyup.enter="logName"/>
<span>{{name}}</span><br/> <label>年龄：</label>
<!--按键盘触发事件-->
<input ref='age' type="text" v-on:keyup="logAge"/>
<span>{{age}}</span> </div>
<!--<script src="vue.js"></script>-->
<script>
new Vue({
el:"#vuetext",
data:{
name:'',
age:''
},
methods:{
logName:function(){
this.name=this.$refs.name.value;
console.log("你正在输入名字"+this.name);
},
logAge:function(){
this.age=this.$refs.age.value;
console.log("你正在输入年龄"+this.age);
}
}
});
</script>
<!--${ pageContext.request.contextPath}-->
</body>
</html>
键盘事件二
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>键盘事件二</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="vuetext">
<h1>键盘事件二</h1>
<label>姓名：</label>
<input ref="name" type="text" v-model="name"/>
<span>{{name}}</span><br/> <label>年龄：</label>
<input type="text" v-model="age"/>
<span>{{age}}</span> </div>
<!--<script src="vue.js"></script>-->
<script>
new Vue({
el:"#vuetext",
data:{
name:'张三',
age:''
},
methods:{ }
});
</script>
<!--${ pageContext.request.contextPath}-->
</body>
</html>
Vue键盘事件的更多相关文章
- Vue 键盘事件
Vue2键盘事件:keydown/keyup... 1.使用 <!DOCTYPE html> <html> <head> <title></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- ...
随机推荐
- Ubuntu12.04下安装sourcenavigator-NG4.5阅读源代码
大家知道Windows下有一个很好的查看源代码的软件sourceinsight,使用sourceinsight查看Linux内核代码.嵌入式软件开发中的C语言项目源代码.驱动程序代码很是方便.在Lin ...
- react map循环数据 死循环
项目条件:react es6 antidesign 已在commonState中获取到list,但是在循环map填充DOM的时候陷入死循环. 原因:因为是子组件 ,在父组件请求数据的时候 有个时差过程 ...
- org.apache.hadoop.hbase.master.HMasterCommandLine: Master exiting java.lang.RuntimeException: HMaster Aborted
前一篇的问题解决了,是 hbase 下面lib 包的jar问题,之前写MR的时候加错了包,替换掉了原来的包后出现另一问题:@ubuntu:/home/hadoop/hbase-0.94.6-cdh4. ...
- openssl编译方法
受不了了,终于编译成功了openssl,写一下编译方法吧 准备: 0:要编译openssl,必不可少的是代码,去下载 https://www.openssl.org/source/ 1:要有一个VS系 ...
- VBA+SQL transform pivot union联合查询的基础应用
Sub 项目状态查询() '如果“项目状态”是未转运营那么实施状态是不能选择的,因为还没有实施.'如果“项目状态”选择状态后,那么项目名称里面只显示该状态的项目名称.如果“项目状态”选择的不是未转运营 ...
- 用Cygwin实现在window环境下使用Linux命令-nohup 来后台运行程序
1.安装Cygwin 下载 cygdrive-选择64或32位 http://www.cygwin.com/ 注:可以百度搜索安装步骤 2.配置它的环境变量 添加到path路径中 3.cmd 执 ...
- Keepalived+LVS+nginx搭建nginx高可用集群
1. 环境准备 1. VMware; 2. 4台CentOs7虚拟主机:192.168.122.248,192.168.122.68, 192.168.122.110, 192.168.122.167 ...
- HTTP状态码及请求头
状态码 状态码告知从服务器端返回的请求结果 一般可分为5个大类 1XX Informational(信息性状态码) 2XX Success(成功状态码) 3XX Redirection(重定向状态码) ...
- mui请求数据接口问题
今天我在本地模拟做一个数据请求,第一次用的mui自带的方法来请求数据,当时我的本地接口地址是http://localhost:8087/jeecg/sightseerController.do?che ...
- 二分法的应用：POJ1064 Cable master
/* POJ1064 Cable master 时间限制: 1000MS 内存限制: 10000K 提交总数: 58217 接受: 12146 描述 Wonderland的居民已经决定举办地区性编程比 ...