使用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 = [];
        }
      }
    })
  }

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