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- ...
随机推荐
- package com.nps.base.xue.xd.groovyEngine import com.google.gson.Gson import com.google.gson.reflect.TypeToken import com.nps.common.service.NpsApplicationContextHolder import com.nps.data_api.service
原因: Switch this to "false" to let the transaction originator make the rollback decision. I ...
- 拾遗：Go 基础
这 Go,越看越像是 C 和 Python 的混合体--! gofmt 用于格式化代码,缩进使用 tab,而不是空格:Python 官方则建议使用空格,而不是 tab package Go 惯例,使用 ...
- 30个优秀的CSS技术和实例 By 彬Go 2008-12-04
在这里可发现很多与众不同的技术,比如:图片集.阴影效果.可扩展按钮.菜单等…这些实例都是使用纯CSS和HTML实现的.单击每个实例的标题可以被转向到该技术实例的相关教程或说明页面(英文),单击每个实例 ...
- thinkphp5.1、thinkphp6
下载原装:https://packagist.org/packages/topthink/think composer create-project topthink/think tp 6.0.*-d ...
- sqlserver 如何瞬间执行上万条数据
核心的内容是:使用自定义表类型 第一步:创建存储过程P_T1DeclareInfo_Upload_new 参数: T1DeclareInfo_UploadPNSN_Param 类型 T1Declar ...
- 关于vsphere exsi安装时遇到的问题
我在虚拟机上安装vsphere 6.0的时候,在安装的过程中报错,出现了如下的内容. Error loading /tools.t00 Compressed MD5: Decompressed MD5 ...
- kindEditor富文本编辑器的工具栏设置
如何配置kindeditor的工具栏 kindeditor编辑器的工具栏主要是指编辑器输入框上方的那些可以操作的菜单,默认情况下编辑器是给予了所有的工具栏.针对不同的用户,不同的项目,不同的环境,可能 ...
- HashMap是不是有序的？
不是有序的. 有没有有顺序的Map实现类? 有TreeMap和LinkedHashMap. TreeMap和LinkedHashMap是如何保证它的顺序的? LinkedHashMap 是根据元素增加 ...
- 在vue中使用Element的message组件
在vue中使用Element的message组件 在vue文件中使用 this.$message({ message: "提示信息", type: "success&qu ...
- CSS案例1（导航栏）
文本的装饰 text-decoration 通常我们用于给链接修改装饰效果 使用技巧:在一行内的盒子内,我们设定行高等于盒子的高度,就可以使文字垂直居中. <head> <meta ...