使用Bootstrap + Vue.js实现添加删除数据示例

界面首先需要引入bootstrap的css和bootstrap的js文件，还有vue.js和jQuery.js才可以看见效果。

这里提供bootstrap的在线文件给大家引用：

效果如下图所示，输入用户名和年龄，点击添加，数据会自动添加到下面的用户信息表内。当没有数据时，用户信息表显示：暂无数据……，当有数据时，显示 删除全部 按钮，这里为了方便快捷，我没有做删除按钮的弹出框，所以 点击删除按钮 会直接删除掉当前这条数据。

 
    
    

    

      
用户信息表
      

 
序号
 
名字
 
年龄
 
操作
      
      

 
{{index+1}}
 
 
{{item.name}}
 
{{item.age}}
 

   删除
 
      
      

 

   删除全部
 
      
      

 

   
暂无数据……
 
      
    
  

window.onload = function(){
    new Vue({
      el:"#box",
      data:{
 mydata:[],
 username:'',
 age:'',
 nowIndex:-100
      },
      methods:{
 add:function(){
   this.myData.push({
     name:this.username,
     age:this.age
   });
   this.username='';
   this.age='';
 },
 deleteMsg:function(){
   this.myData.splice(0,1)
 },
 all:function(){
   this.myData = [];
 }
      }
    })
  }

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