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前端组件学习教程》，欢迎大家学习阅读。
