Vue方法与事件处理器详解


Posted in Javascript onDecember 01, 2016

本文实例为大家分享了Vue方法与事件处理器的使用,供大家参考,具体内容如下

按键修饰符

在监听键盘事件时,我们经常需要检测 keyCode。Vue.js 允许为 v-on 添加按键修饰符:

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难,Vue.js 为最常用的按键提供别名:

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

全部的按键别名:enter 、tab 、delete、 esc 、space、 up 、down、 left 、right。

eg:

HTML如下:

<template>
<div class="home-body">
 <div class="project-all">
 <template v-for='project in projectData'>
 <div class="name" v-on:click='successT($index)' v-bind:class="{'success':project.success}">{{project.projectName}}</div>
 </template>
 <div class="name" v-if='addp' v-on:click='addproject'>新增项目</div>
 <div class="name" v-if='!addp'>
 <input type="text" class='name-input' placeholder='请填写项目名称' v-on:keyup.enter='saveProjectFun' v-el:addProject>
 </div>
 <div class="name">
 <input type="text" class='name-input' placeholder='esc' v-on:keyup.esc='escFun'>
 </div>
 <div class="name">
 <input type="text" class='name-input' placeholder='delete' v-on:keyup.delete='deleteFun'>
 </div>
 <div class="name">
 <input type="text" class='name-input' placeholder='space' v-on:keyup.space='spaceFun'>
 </div>
 <div class="name">
 <input type="text" class='name-input' placeholder='up' v-on:keyup.up='upFun'>
 </div>
 <div class="name">
 <input type="text" class='name-input' placeholder='down' v-on:keyup.down='downFun'>
 </div>
 <div class="name">
 <input type="text" class='name-input' placeholder='left' v-on:keyup.left='leftFun'>
 </div>
 <div class="name"> 
 <input type="text" class='name-input' placeholder='right' v-on:keyup.right='rightFun'>
 </div>
 </div>
</div>
</template>

JS代码:

<script>
export default {
 components: {

 },
 ready: function() {
 
 },
 methods: {
 //当你选种某个项目时,将其success属性改为true,为其class添加 success 
 successT:function(index){
 this.projectData.forEach(function(item){
 item.success=false;
 });
 this.projectData[index].success=true;
 },
 //点击添加项目后让其不显示
 addproject:function(){
 this.addp=false;
 }, 
 //当用户按回车后,保存添加的项目
 saveProjectFun:function(){
 var obj={}
 obj.success=false;
 let name=this.$els.addproject.value;
 obj.projectName=name.replace(/\s+/g,""); 
 this.projectData.push(obj);
 this.addp=true;
 },
 escFun:function(){
 alert("esc");
 },
 deleteFun:function(){
 alert("delete");
 },
 spaceFun:function(){
 alert("space空格键");
 },
 upFun:function(){
 alert("up");
 },
 downFun:function(){
 alert("down");
 },
 leftFun:function(){
 alert("left");
 },
 rightFun:function(){
 alert("right");
 }
 },
 data() {
 return {
 addp:true,//是否显示添加项目
 projectData:[{
  success:false,
  projectName: '人员管理系统'
  }, { 
  success:false,
  projectName: '管理系统'
  },{
  success:false,
  projectName: '假数据1'
  },{
  success:false,
  projectName: '假数据2'
  }, {
  success:false,
  projectName: '假数据3'
  }
 ],
 }
 }
}
</script>

页面最开始:

Vue方法与事件处理器详解

当你点击新增项目后:

Vue方法与事件处理器详解

在文本框中输入  “豆豆”后按回车键后页面

Vue方法与事件处理器详解

当你按回车键后触发  keyup.enter事件调saveProjectFun方法,在此方法中进行数据保存。

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
toString()一个会自动调用的方法
Feb 08 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
Nov 24 Javascript
原生js实现自由拖拽弹窗代码demo
Jun 29 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
Aug 02 Javascript
JS出现失效的情况总结
Jan 20 Javascript
ES6新数据结构Map功能与用法示例
Mar 31 Javascript
Node.js pipe实现源码解析
Aug 12 Javascript
JavaScript设计模式之调停者模式实例详解
Feb 03 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
Feb 28 Javascript
简单理解vue中实例属性vm.$els
Dec 01 #Javascript
jsp 自动编译机制详细介绍
Dec 01 #Javascript
基于vue.js实现图片轮播效果
Dec 01 #Javascript
JQuery学习总结【一】
Dec 01 #Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 #Javascript
jQuery 如何实现一个滑动按钮开关
Dec 01 #Javascript
有趣的bootstrap走动进度条
Dec 01 #Javascript
You might like
php使用GeoIP库实例
2014/06/27 PHP
一个比较不错的PHP日历类分享
2014/11/18 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
Javascript模板技术
2007/04/27 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
2010/06/28 Javascript
js图片处理示例代码
2014/05/12 Javascript
JS中FRAME的操作问题实例分析
2014/10/21 Javascript
jQuery实现Twitter的自动文字补齐特效
2014/11/28 Javascript
js函数与php函数的区别实例浅析
2015/01/12 Javascript
详解AngularJS Filter(过滤器)用法
2015/12/28 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
js eval函数使用,js对象和字符串互转实例
2017/03/06 Javascript
基于Koa2写个脚手架模拟接口服务的方法
2018/11/27 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
layui table 表格模板按钮的实例代码
2019/09/21 Javascript
详解Vue的mixin策略
2020/11/19 Vue.js
[00:36]我的中国心——Serenity vs Fnatic
2018/08/21 DOTA
Python获取脚本所在目录的正确方法
2014/04/15 Python
python实现多线程采集的2个代码例子
2014/07/07 Python
python实现聚类算法原理
2018/02/12 Python
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
keras和tensorflow使用fit_generator 批次训练操作
2020/07/03 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
python获取linux系统信息的三种方法
2020/10/14 Python
移动端Html5中百度地图的点击事件
2019/01/31 HTML / CSS
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
授权委托书样本
2014/04/03 职场文书
三方合作协议书范本
2014/04/18 职场文书
社区健康教育工作方案
2014/06/03 职场文书
作风年建设汇报材料
2014/08/14 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers
mongoDB数据库索引快速入门指南
2022/03/23 MongoDB
DQL数据查询语句使用示例
2022/12/24 MySQL