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- ...
随机推荐
- HDU 1392 Surround the Trees (凸包周长)
题目链接:HDU 1392 Problem Description There are a lot of trees in an area. A peasant wants to buy a rope ...
- Codeforces 1176B - Merge it!
题目链接:http://codeforces.com/problemset/problem/1176/B 题意:给定序列,任意俩个元素可以相加成一个元素,求序列元素能被3整除的最大数量. 思路: 对于 ...
- （转载）js调用打印机 打印整体或部分
本文转载自:https://www.cnblogs.com/lfhy/p/6802781.html 以下为原文内容: 有时前端的项目中需要添加打印的功能,首先要知道打印分为整体打印和局部打印两种,而局 ...
- CSS中复选框单选框与常用12px文字不对齐问题（转载）
原文 http://www.cnblogs.com/aobingyan/p/3823556.html,有删改 目前中文网站上面的文字,绝大多数网站的主流文字大小为12px,因为在目前高分辨率显示器屏 ...
- 高程（三）----数组Array
一.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上 ...
- 如何解决 react-create-app 里面的 no-unused-vars ？
如果每次启动都有一大串的no-unused-vars 是不是感觉特别烦,不用担心啦,有个配置可以解决它: 在Hbuild 里面可以新建一个 .eslintrc 其他文件(伤心的是我在webStorm ...
- vue-router 使用二级路由去实现子组件的显示和隐藏
在需求中有一个这样的情况:一个组件在主组件和另外的组件中引用,且点击主组件和这个组件分别有相应得切换事件. 一开始的时候我是没有划分组件,把它们放到主组件内,这样便于切换,但是主主件内有独立的部分需要 ...
- sql ibatis
<!-- 写入单位下当前参保人员 --> <insert id="insertTempCaz043" parameterClass="map" ...
- 5.1中容器(Container)和门面(Facade)的实现
tp5.1中引入了容器(Container)和门面(Facade)这两个新的类 官方文档已经给出了定义: 容器(Container)实现类的统一管理,确保对象实例的唯一性. 门面(Facade)为容器 ...
- Storm设计思想