欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue方法与事件处理器详解

程序员文章站 2024-02-06 16:57:40
本文实例为大家分享了vue方法与事件处理器的使用,供大家参考,具体内容如下 按键修饰符 在监听键盘事件时,我们经常需要检测 keycode。vue.js 允许为 v...

本文实例为大家分享了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前端组件学习教程》,欢迎大家学习阅读。

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