使用Vue快速开发增行、减行、删除指定行

  • A+
所属分类:Web开发

我是刚刚开始学习vue的框架,使用最简单的方法进行学习,那就是引入js文件。

在项目的使用过程中遇到一个小功能,就是动态增行、减行、删除指定行

我尝试使用jquery进行开发,但是代码量过多(虽然最后我还是选择了是用jquery,因为我对vue的理解还不够深刻),所以这里我把我使用vue进行开发的同样的功能实例代码记录一下。

这里面需要注意的就是父级->子级传值的问题(模板里面的data属性用来解决传值时动态数据变化的问题),其他的都很好理解。

我们需要给table一个id,用来实例化vue

我们修改tr为

给他搞两个按钮上去

然后我们添加如下的js脚本

业务功能

下图为演示动图

使用Vue快速开发增行、减行、删除指定行

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: