vue处理table数据,vue实现table表格全选删除

　　这篇文章主要为大家详细介绍了某视频剪辑软件表实现添加和删除，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

　　本文实例为大家分享了某视频剪辑软件表实现添加和删除的具体代码，供大家参考，具体内容如下

一.代码

　　！声明文档类型

　　超文本标记语言

　　头

　　meta charset=utf-8

　　标题表格示例/标题

　　风格。表格_框{

　　高度：自动；

　　宽度：90%;

　　利润率：5%自动；

　　}。表格{

　　边框-塌陷：塌陷；

　　宽度：100%;

　　高度：自动；

　　}

　　h1 {

　　文本对齐：居中；

　　}

　　/风格

　　/头

　　身体

　　div id=应用程序

　　div class=table_box

　　氕表格练习/h1

　　输入类型=text v-model=text/

　　按钮@click=添加添加/按钮

　　table class=table border=1

　　四羟乙基己二酰胺

　　tr

　　泰国(泰国)序号/th

　　泰国(泰国)品牌/th

　　泰国(泰国)时间/th

　　泰国(泰国)操作/th

　　/tr

　　/thead

　　在需要分行下载处加上

　　tr v-for=(v，k) in list :key=k

　　th{{v.id}}/th

　　th{{v.name}}/th

　　th{{v.time}}/th

　　泰国(泰国)

　　a href=# @click.prevent=del(k)删除/a

　　/th

　　/tr

　　/tbody

　　/表格

　　/div

　　/div

　　/body

　　/html

　　脚本src= https://cdn。jsdelivr。net/NPM/vue /脚本

　　脚本

　　var vm=new Vue({

　　埃尔： #app ，

　　数据：{

　　数字：1,

　　列表：[],

　　文本： ,

　　},

　　方法：{

　　add: function () {

　　this.list.unshift({

　　id: this.num，

　　 name: this.text，

　　时间:新日期()。toLocaleString()，

　　});

　　},

　　德尔：函数（索引){

　　如果（确认(请问您是否确定删除当前行)) {

　　this.list.splice(索引，1);

　　}

　　},

　　}

　　});

　　/脚本

二.运行效果

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。