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- ...
随机推荐
- 去除字符串中的HTML标签
背景:Kindeditor内容保存在数据库中的类型是text,包含文字和HTML标签. 需求:显示内容的前50个字(纯文字内容) 方法:将字段查出去除标签,截取前50 import java.util ...
- vue项目使用js-xlsx进行excel表格的导入和导出方法的简单原型封装
前提:已经安装好 file-saver xlsx和 script-loader,如未安装,请查看 https://www.cnblogs.com/luyuefeng/p/8031597.html 新建 ...
- git提交遇到.suo文件无法提交的问题
这个只是我个人遇到的一个问题小记 由于最近做的项目使用VS编辑器的,在用它集成创建的项目里,每次提交都会有个后缀名为.suo的文件在修改的文件列表里.这时直接进行提交会报错, 1.我将xx.suo/x ...
- 关于redis闪退的案例
我需要恢复之前备份的文件:dump.rdb,文件大小2.2G 于是将dump.rdb放在redis的安装目录下,然后启动redis. ./redis-server redis.conf 然后我在另一个 ...
- Vue+element ui table 导出到excel
需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...
- (Struts2学习系列四)Struts2指定配置文件
我们的每个action都在struts.xml里配置的话,就会出现很多的xml语句,单单一个struts.xml就会变得很大,所以我们会在struts.xml里使用include引入其他的.xml文件 ...
- Peasy.NET学习之并发问题处理
Peasy.net之并发处理 BusinessServiceBase是ServiceBase的自定义实现,提供了额外的独特功能 首先,创建一个业务服务,该业务服务必须继承BusinessService ...
- 笔记50 Mybatis快速入门（一）
一.Mybatis简介 MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.MyBatis ...
- ajax-jq
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- webpack4.0高级
环境变量 webpack --env.NODE_ENV=local --env.production --progress Tree Shaking 移除JS上下文字未被引用的代码 只支持ES6的im ...