一、Html樣式

<div class="container" id="box">
    <form role="form">
      <div class="form-group">
        <label for="username">username：</label>
        <!-- 用v-model指令將input內的值與實例data內的值綁定在一起 -->
        <input type="text" class="form-control" id="username" v-model="username" placeholder="Please enter your username">
      </div>
      <div class="form-group">
        <label for="password">password:</label>
        <input type="password" class="form-control" id="password" v-model="password" placeholder="please enter your password">
      </div>
      <!-- 用v-on指令綁定點擊click事件 -->
      <button type="button" class="btn btn-primary" v-on:click="add">submit</button>
      <button type="reset" class="btn btn-danger">reset</button>
    </form>
    <hr>
    <table class="table table-bordered table-hover">
      <caption class="h3 text-center text-muted">用戶信息表</caption>
      <tr class="text-danger">
        <th class="text-center">id</th>
        <th class="text-center">username</th>
        <th class="text-center">password</th>
        <th class="text-center">option</th>
      </tr>
      <tr class="text-center" v-for="(item,index) in myData">
        <!-- 用v-for指令循環渲染列表 index為索引值 -->
        <td>{{index+1}}</td>
        <td>{{item.name}}</td>
        <td>{{item.pwd}}</td>
        <td>
          <button class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal" v-on:click="nowIndex = index">delete</button>
        </td>
      </tr>
      <!--用v-show指令 根據條件返回的布爾值決定是否渲染  -->
      <tr v-show="myData.length != 0">
        <td colspan="4" class="text-right">
          <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#myModal" v-on:click="{nowIndex = all,modalTitle = 'confirm delete all?'}"> delete all</button>
        </td>
      </tr>
      <tr v-show="myData.length == 0">
        <td colspan="4" class="text-center text-muted">
          <p>暫無數據...</p>
        </td>
      </tr>
    </table>

    <!-- 模態框 -->
    <div role="dialog" class="modal fade bs-example-modal-sm" id="myModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
            <h4 class="modal-title">{{modalTitle}}</h4>
          </div>
          <div class="modal-body text-right">
            <button class="btn btn-primary btn-sm" data-dismiss="modal" v-on:click="remove(nowIndex)">yes</button>
            <button class="btn btn-danger btn-sm" data-dismiss="modal">no</button>
          </div>
        </div>
      </div>
    </div>
  </div>

二、JS部分

<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
<script src="./libs/jquery-3.2.1.min.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
<script src="./libs/vue.js"></script>

<script>
    window.onload = function(){
      new Vue({
        el:"#box",
        data:{
          myData:[],
          username:'',
          password:'',
          nowIndex:'',//當前用戶的索引
          modalTitle:'confirm delete?'//模態框的title
        },
        methods:{
          add:function(){
            var name = this.username.trim();
            var pwd = this.password.trim();
            this.myData.push({
              name:name,
              pwd:pwd
            });
            this.username = '';
            this.password = '';
          },
          remove:function(index){
            if(index == 'all'){
              //刪除所有
              this.myData = [];
            }else{
              //刪除索引為index的那條信息
              this.myData.splice(index,1);
            }
          }
        }
      })
    };
  </script>