多平台统一管理软件接口,如何实现多平台统一管理软件接口
203
2023-06-27
Vue方法与事件处理器详解
本文实例为大家分享了vue方法与事件处理器的使用,供大家参考,具体内容如下
按键修饰符
在监听键盘事件时,我们经常需要检测 keyCode。Vue.js 允许为 v-on 添加按键修饰符:
记住所有的 keyCode 比较困难,Vue.js 为最常用的按键提供别名:
全部的按键别名:enter 、tab 、delete、 esc 、space、 up 、down、 left 、right。
eg:
HTML如下:
JS代码:
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'
}
],
}
}
}
页面最开始:
当你点击新增项目后:
在文本框中输入 “豆豆”后按回车键后页面
当你按回车键后触发 keyPqOyCNVup.enter事件调saveProjectFun方法,在此方法中进行数据保存。
本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~