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 相关文章推荐
js创建子窗口并且回传值示例代码
Jul 02 Javascript
Jquery Uploadify上传带进度条的简单实例
Feb 12 Javascript
Javascript 基础---Ajax入门必看
Jul 06 Javascript
COM组件中调用JavaScript函数详解及实例
Feb 23 Javascript
JavaScript仿微信打飞机游戏
Jul 05 Javascript
bootstrap栅格系统示例代码分享
May 22 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
Aug 23 Javascript
bootstrap模态框关闭后清除模态框的数据方法
Aug 10 Javascript
vue返回上一页面时回到原先滚动的位置的方法
Dec 20 Javascript
ECharts地图绘制和钻取简易接口详解
Jul 12 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
Aug 16 Javascript
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
简单理解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实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
深入PHP nl2br()格式化输出的详解
2013/06/05 PHP
PHP 断点续传实例详解
2017/11/11 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
超简单的jquery的AJAX用法
2010/05/10 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
2010/10/14 Javascript
当达到输入长度时表单自动切换焦点
2014/04/06 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
jQuery实现图片文字淡入淡出效果
2015/12/21 Javascript
javascript中setAttribute兼容性用法分析
2016/12/12 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
javascript使用链接跨域下载图片
2019/11/01 Javascript
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
javascript自定义加载loading效果
2020/09/15 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
使用python装饰器验证配置文件示例
2014/02/24 Python
Python操作MySQL简单实现方法
2015/01/26 Python
python检测是文件还是目录的方法
2015/07/03 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
python匹配两个短语之间的字符实例
2018/12/25 Python
Python实现的爬取百度文库功能示例
2019/02/16 Python
Python 控制终端输出文字的实例
2019/07/12 Python
wxPython多个窗口的基本结构
2019/11/19 Python
Django多进程滚动日志问题解决方案
2019/12/17 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
css3 自定义字体font-face使用介绍
2014/05/14 HTML / CSS
仓库理货员岗位职责
2013/12/18 职场文书
2014年应届大学生自我评价
2014/01/09 职场文书
哈弗商学院毕业生求职信
2014/02/26 职场文书
依法行政工作汇报材料
2014/10/28 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
初中化学教学反思
2016/02/22 职场文书
关于html选择框创建占位符的问题
2021/06/09 HTML / CSS
python中对列表的删除和添加方法详解
2022/02/24 Python