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 相关文章推荐
jquery-easyui关闭tab自动切换到前一个tab
Jul 29 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
Mar 31 Javascript
深入理解JavaScript中的箭头函数
Jul 28 Javascript
轻松学习Javascript闭包函数
Dec 15 Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
Oct 16 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
Mar 02 Javascript
Vue.set()实现数据动态响应的方法
Feb 07 Javascript
JavaScript 五大常见函数
Mar 23 Javascript
微信小程序实现卡片左右滑动效果的示例代码
May 01 Javascript
JS阻止事件冒泡的方法详解
Aug 26 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
关于PHP5 Session生命周期介绍
2010/03/02 PHP
《PHP编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
解析使用ThinkPHP应该掌握的调试手段
2013/06/20 PHP
php导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
PHP+JQUERY操作JSON实例
2017/03/23 PHP
php成功操作redis cluster集群的实例教程
2019/01/13 PHP
php使用fullcalendar日历插件详解
2019/03/06 PHP
javascript函数中的arguments参数
2010/08/01 Javascript
js图片延迟技术一般的思路与示例
2014/03/20 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/10/05 Javascript
Javascript农历与公历相互转换的简单实例
2016/10/09 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
2019/12/30 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
2020/02/06 Javascript
jQuery实现视频展示效果
2020/05/30 jQuery
python正则分组的应用
2013/11/10 Python
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
Python 编码处理-str与Unicode的区别
2016/09/06 Python
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
终端命令查看TensorFlow版本号及路径的方法
2018/06/13 Python
python利用插值法对折线进行平滑曲线处理
2018/12/25 Python
python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例
2020/03/01 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
一套C++笔试题面试题
2012/06/06 面试题
自荐信如何“自荐”
2013/10/24 职场文书
世界红十字日活动总结
2015/02/10 职场文书
2015员工年度考核评语
2015/03/25 职场文书
大学生入党自我鉴定范文
2019/06/21 职场文书
python解决12306登录验证码的实现
2021/04/18 Python
Python 用户输入和while循环的操作
2021/05/23 Python