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- ...
随机推荐
- MySQL数据库（五）—— 用户管理、pymysql模块
用户权限管理.pymysql模块 一.用户管理(权限管理) 在MySQL中自带的mysql数据库中有4个表用于用户管理的 # 优先级从高到低 user > db > tables_priv ...
- 【二】Jmeter接口自动化测试系列之函数使用及扩展
上一篇文章我们了解了Jmeter的参数化的集中方法,虽然方法不是很多,但已经足够使用! 本篇文章,介绍一下Jmeter自带函数的使用和 函数扩展,来满足测试工作中的各种需求! Jmeter自带函数 点 ...
- 微信小程序开发之https服务器搭建三步曲
本篇文章主要讲述3个方面的内容,如下: 1.SSL证书的获取 2.服务器 Nginx SSL 证书的配置. 3.如何兼容80端口和443端口以及为什么要同时兼容这两个端口. 1.SSL证书的获取 ht ...
- windows7远程连接服务器出现身份验证错误，又找不到加密Oracle修正
把以下内容复制到文本中, Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\Software\Microsoft\Windows\Cur ...
- 笔记58 Spring+Hibernate整合（一）
Spring+Hibernate整合 一.整合思路 使DAO继承HibernateTemplate这个类 HibernateTemplate这个类提供了setSessionFactory()方法用于注 ...
- vue之事件处理
一.事件处理方法 1.格式 完整格式:v-on:事件名="函数名" 或 v-on:事件名="函数名(参数……)" 缩写格式:@事件名="函数名&qu ...
- 保护Laravel .env文件，防止直接访问
web服务器: Apache 服务器系统: Ubuntu 14.04 如果不是vhost的形式部署在服务器上,可能是可以通过 http://www.example.com/.env 查看到larave ...
- svn 一、 安装及汉化
svn 是日常开发过程中常用的版本控制工具 第一步 安装 进入官网 https://tortoisesvn.net/ 点击downloads 进入之后选中 需要的版本,及位数 这里推荐安装最新版的 因 ...
- 小程序登录时如何获取input框中的内容
最近写小程序项目遇到一些问题,今天整理下这些问题的解决方法,希望对用户有帮助.下面是登录页,点击登录时获取input框中的值, 效果如下: wxml布局如下: <view > <in ...
- Shell test命令（Shell []）详解，附带所有选项及说明
test 是 Shell 内置命令,用来检测某个条件是否成立.test 通常和 if 语句一起使用,并且大部分 if 语句都依赖 test. test 命令有很多选项,可以进行数值.字符串和文件三个方 ...