Vue.js实现的表格增加删除演示示例

本文实例讲述了Vue.js实现的表格增加删除演示。分享给大家供大家参考，具体如下：

Vue.js是当下很火的一个视图模型库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的原料药，使得我们能够快速地上手并使用Vue.js。

使用本站在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun,得到如下所示的运行效果：

具体代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title vue。射流研究…小演示/标题链接rel='样式表href=' https://cdn。bootscs。com/bootstrap/4。0 .0-阿尔法。6/CSS/bootstrap。量滴CSS ' rel='外部无跟随'样式标签{ float:left线高： 34px} .面板-车身{ margin :30 px auto }/style/head dy！-这是我们的view-div class=' col-MD-6 ' div class=' panel panel-default ' id=' app ' div class=' panel-body ' div class=' form-group ' label class=' col-MD-2 control-label ' name:/label输入类型=' text ' class=' col-MD-9 form-control ' v-model=' new person。name '/div class=' form-group ' label class=' col-MD-2 control-label ' age:/label input type=' text ' class=' col-MD-9 form-control ' v-model=' new person。age '/div class=' form-group ' label class=' col-MD-2 control-label ' sexual:/label select class=' col-MD-9 form-control ' v-model=' new person。“性”选项值='男'男/选项值='女'女/选项/select/select创建一个某视频剪辑软件实例或视图模型，它连接视角与模型var VM=new Vue({ El : ' # app '，数据： { new person : { name : ' '，age: ' '，sex: '男性}，people: [{ name: 'Jack，age: 30，sex: '男性}，{姓名： '比尔'，年龄： 26岁，性别： '男性}，{姓名： '特雷西'，年龄： 22，//添加完新人对象后，重置新人对象this.newPerson={name: ' '，age: ' '，sex: '男性' }，delPerson:函数（索引){ //删一个数组元素this.people .拼接(索引，1);} }});/script/html希望本文所述对大家vue.js程序设计有所帮助。