js实现表格的行删除和增加_vue小demo之实现表格的增加和删除

点击上方蓝色字体，关注我们

1.搭建脚手架项目

第一步：搭建脚手架，搭建好了之后我们安装sass.安装方法是先安装sass的依赖包 npm  install  --save-dev  sass-loader然后Sass-loader依赖于node-sass,所以要安装node-sass ，直接命令npm  install  --save-dev  node-sass 。如果没有安装成功可以用cnpm来安装，命令

npm install -g cnpm -- registry=https://registry.npm.taobao.org来安装cnpm,cnpm安装成功之后就能用命令cnpm -v检测cnpm的版本。

如果sass安装成功我们就能在package.json里看到如下红框的两个地方：

安装好sass之后在webpack.base.conf.js文件夹下配置

sass使用$符号来标识变量，在要用到scss的组件里面的style标签上加上lang="scss"，在app.vue文件定义一个背景颜色变量，应用到css样式中，背景变成灰色，说明已成功配置好sass

表格的增加和删除

直接上代码：

先看一下目前实现的效果长什么样子：

目前当我们选中时，会出现划线和勾选对勾，当我输入"新的学习计划"并点击"添加计划"按钮之后效果如下:

点击"已完成"查看已完成的计划:

点击"未完成"查看未完成的计划:

当我点击删除未完成里的"新的学习计划"之后，此时未完成里只剩"学习计划2"，并且所有计划里的"学习计划2"也一并被删除了:

同样，当我点击删除已完成里的"学习计划3"之后，此时已完成里只剩"学习计划1"，并且所有计划里的"学习计划3"也一并被删除了: