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>
页面最开始:
当你点击新增项目后:
在文本框中输入 “豆豆”后按回车键后页面
当你按回车键后触发 keyup.enter事件调saveprojectfun方法,在此方法中进行数据保存。
本文已被整理到了《vue.js前端组件学习教程》,欢迎大家学习阅读。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。