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 相关文章推荐
使用SyntaxHighlighter实现HTML高亮显示代码的方法
Feb 04 Javascript
JavaScript Chart 插件整理
Jun 18 Javascript
JavaScript中判断函数是new还是()调用的区别说明
Apr 07 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
Oct 17 Javascript
Javascript常用小技巧汇总
Jun 24 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
May 03 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
Jun 06 Javascript
Javascript使用SWFUpload进行多文件上传
Nov 16 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
Mar 10 Javascript
angularJS之$http:与服务器交互示例
Mar 17 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
javascript实现点击小图显示大图
Nov 29 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
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
php使用GD实现颜色渐变实例
2015/06/02 PHP
php blowfish加密解密算法
2016/07/02 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
简明json介绍
2008/09/28 Javascript
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
如何实现textarea里的不同文本显示不同颜色
2014/01/20 Javascript
jquery中animate的stop()方法作用实例分析
2015/01/30 Javascript
IE浏览器下PNG相关功能
2015/07/05 Javascript
JavaScript实现点击按钮直接打印
2016/01/06 Javascript
javascript实现全角转半角的方法
2016/01/23 Javascript
javascript基础知识分享之类与函数化
2016/02/13 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
2017/01/22 Javascript
Angularjs 实现移动端在线测评效果(推荐)
2017/04/05 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
Vue.extend实现挂载到实例上的方法
2019/05/01 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
python错误:AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
2014/08/22 Python
Python写的服务监控程序实例
2015/01/31 Python
python对DICOM图像的读取方法详解
2017/07/17 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
keras 使用Lambda 快速新建层 添加多个参数操作
2020/06/10 Python
Python如何给函数库增加日志功能
2020/08/04 Python
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
新加坡一家在线男士皮具品牌:Faire Leather Co.
2019/12/01 全球购物
简历中的自我评价范文
2014/02/05 职场文书
关于环保的建议书400字
2014/03/12 职场文书
2014年居委会工作总结
2014/12/09 职场文书
2015年仓库工作总结
2015/04/09 职场文书
2015年采购部工作总结
2015/04/23 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技