Bootstrap + Vue.js implements adding and deleting data

The interface first needs to introduce bootstrap css and bootstrap js files, as well as vue.js and jQuery.js to see the effect.

The online files of bootstrap are provided here for your reference:

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

The effect is as shown in the figure below. Enter the user name and age, click Add, and the data will be automatically added to the user information table below. When there is no data, the user information table displays: No data yet... When there is data, a delete all button is displayed. For convenience and speed, I did not create a pop-up box for the delete button, so clicking the delete button will directly delete the current item. Article data.

##

 <p class="container" id="box">
    <form role="form">
      <p class="form-group">
        <label for="username">用户名：</label>
        <input type="text" id="username" class="form-control" placeholder="请输入用户名" v-model="username" />
      </p>
      <p class="form-group">
        <label for="age">年龄：</label>
        <input type="text" id="age" class="form-control" placeholder="请输入年龄" v-model="age" />
      </p>
      <p class="form-group">
        <input type="button" value="添加" class="btn btn-primary" v-on:click="add()" />
        <input type="reset" value="重置" class="btn btn-danger" />
      </p>
    </form>
    <hr>
    <table class="table table-bordered table-hover">
      <caption class="text-center">用户信息表</caption>
      <tr class="text-danger">
        <th class="text-center">序号</th>
        <th class="text-center">名字</th>
        <th class="text-center">年龄</th>
        <th class="text-center">操作</th>
      </tr>
      <tr class="text-center" v-for="(item, index) in myData">
        <td>{{index+1}}</td> 
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
        <td>
          <button class="btn btn-primary btn-sm" v-on:click="deleteMsg()">删除</button>
        </td>
      </tr>
      <tr v-show="myData.length!==0">
        <td colspan="4" class="text-right">
          <button class="btn btn-danger" v-on:click="all()">删除全部</button>
        </td>
      </tr>
      <tr v-show="myData.length==0">
        <td colspan="4" class="text-center text-muted">
          <p>暂无数据……</p>
        </td>
      </tr>
    </table>
  </p>

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

The above is the entire content of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support the PHP Chinese website.

For more articles related to Bootstrap + Vue.js for adding and deleting data, please pay attention to the PHP Chinese website!