初学者

2024-07-14 21:50| 来源: 网络整理| 查看: 265

自己简单的学习了VUE的一些指令操作后，为了巩固知识，尝试用VUE的指令实现表格的增删改的操作，不涉及到后端。表格内容是VUE里面的对象数组实现的；效果图如下；在这里插入图片描述主要VUE涉及到的指令知识是：

v-show控制某一部分是否展示v-bind绑定事件v-model绑定数据Vue自定义指令操作Vue方法书写

下面展示代码：

VUEtest *{ font-size: 15px; font-family: "微软雅黑 Light"; } 表格展示直接新增信息保存信息序号姓名分数操作编辑删除 vue1=new Vue({ el:'.app', data:{ isDisabled:true, isShow:false, persons: [{id: 1,name:"小何",score:"99"}, {id: 2,name: "小李", score: "88"}, {id: 3,name: "小花",score: "88"}, {id: 4,name: "小刘",score: "88"}, {id: 5,name: "小明",score: "90"}] }, methods:{ Exit(){ //允许编辑 this.isDisabled=false }, Store(){ //禁止编辑 this.isDisabled=true }, Del(){ //删除数据 this.persons.splice(this.id,1) }, Add(){ // 展示新增数据的窗口 this.isShow=true, this.person.push({ id:'', name:'', score:'' }) }, More(){ //直接新增数据 this.persons.push({ id:'', name:'', score:'' }), this.isDisabled=false } }, directives:{ "btcolor":{ bind:function(el) { el.style.color = "black"; } } } })

有问题可在下方讨论哦~(0o0)

【本文地址】

初学者

初学者

今日新闻

推荐新闻