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- ...
随机推荐
- 在Linux下面无法使用向上箭头自动补全上条命令
会用^[[A替代. 参考:http://stackoverflow.com/a/8641302/941650
- Bochs调试VirtualBox生成的VDI映像
将VDI映像转换成Bochs支持的img映像 1: vboxmanage clonehd source.vdi destination.img --format RAW 在bochsrc.txt中引用 ...
- String、StringBuffer、StringBuilder有什么区别？
1.在字符串不经常发生变化的业务场景优先使用String(代码更清晰简洁).如常量的声明,少量的字符串操作(拼接,删除等). 2.在单线程情况下,如有大量的字符串操作情况,应该使用StringBuil ...
- 问题：Error running 'lugia-web': Address loaclhost:1099 is already in use
解决方法:cmd输入下面命令: 第一步: netstat -ano|findstr 1099 找到对应的pid 为3576.(每次不一样). 第二步:taskkill -f -pid 3576
- Android studio的ERROR: Unable to resolve dependency for 错误
同事拷贝一份工程给我,在我这里用AS编译的时候出现这个错误.按照网上很多的方法都不行,后来终于可以. 在AS中打开FILE->Setting->gradle->,在右边service ...
- SpringCloud广告系统随想
广告系统需要两个方面:一个广告投放系统,一个是广告检索系统. 两个系统针对的人群不同: 1.广告投放系统针对的是广告主,他们出资进行广告的投放,将广告的一些数据投放到系统中. 2.广告检索系统针对的是 ...
- python之pyquery 学习
pyquery是jQuery的Python实现,可以用以解析HTML网页的内容.官网文档:http://pythonhosted.org/pyquery/ 下载:https://pypi.python ...
- vue 外卖app (1) 项目目录介绍
api 与后台交互文件夹 common 通用资源文件夹 components 非路由组件文件夹 filters 自定义过滤器模块文件夹 mock 模拟数据文件夹 pages 路由组件文件夹 r ...
- openwrt redis
2071 make V=s 2072 cd build_dir/target-x86_64_uClibc-0.9.33.2/root-x86/ cd package/network/services/ ...
- Thymeleaf语法总结
Thymeleaf是Spring boot推荐使用的模板引擎. 一.th属性 html有的属性,Thymeleaf基本都有,而常用的属性大概有七八个.其中th属性执行的优先级从1~8,数字越低优先级越 ...