vue+element项目动态添加删除数据div
效果如下:
1、初始状态 【vue|vue+element项目动态添加删除数据div】
文章图片
2、点击添加两条数据
文章图片
3、删除第一条数据
文章图片
代码如下:
任务内容:
添加
任务{{index+1}}:
获得DC的比例:
%
删除
export default {
data(){
return{
items : [],
}
},
methods: {
addTest(){
this.items.push({
task_cate: '',
finish_cate: '',
finish_value: '',
dc_rate:''
})
},
deleteTest(index){
this.items.splice(index, 1)
},
},
}
推荐阅读
- vue.js|vue + element-UI 实现深色模式和主题色动态切换
- vue|vue 在js 文件中使用store_【vue】vue +element 搭建项目,vuex中的store使用
- vue|vue + element-ui 聊天_优秀的10个Vue开源项目
- 突发奇想|Vue + Element做个个人中心玩玩~
- Vue|ES6学习——一文搞懂ES6
- 笔记|电话面试-----海康威视
- 面试|海康威视电话面试
- Vue的计算属性
- vue|一篇文章汇总git常用命令