SoFunction
Updated on 2025-04-12

vue implements the todolist function of message board

Through the study of the previous two articles, we have mastered the basic usage of vue. In this article, we use these basic knowledge to implement a message board, which foreigners call it todolist.

first step,Use bootstrap to make layout

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="lib/"/>
  <script src="lib/jquery-1.7."></script>
  <script src="lib/"></script>
</head>
<body>
<div class="container">
  <form role="form">
    <div class="form-group">
      <label for="username">username:</label>
      <input type="text"  class="form-control" placeholder="Enter a username">
    </div>
    <div class="form-group">
      <label for="age">Year　age:</label>
      <input type="text"  class="form-control" placeholder="Input Age">
    </div>
    <div class="form-group">
      <input type="button" value="Add to" class="btn btn-primary">
      <input type="button" value="Reset" class="btn btn-danger">
    </div>
  </form>
  <hr>
  <table class="table table-bordered table-hover">
    <caption class="h2 text-info">User Information Table</caption>
    <tr class="text-danger">
      <th class="text-center">Serial number</th>
      <th class="text-center">name</th>
      <th class="text-center">Yearage</th>
      <th class="text-center">operate</th>
    </tr>
    <tr class="text-center">
      <td>1</td>
      <td>Zhang San</td>
      <td>20</td>
      <td>
        <button class="btn btn-primary btn-sm">delete</button>
      </td>
    </tr>
    <tr class="text-center">
      <td>2</td>
      <td>Li Si</td>
      <td>22</td>
      <td>
        <button class="btn btn-primary btn-sm">delete</button>
      </td>
    </tr>
    <tr>
      <td colspan="4" class="text-right">
        <button class="btn btn-danger btn-sm">delete全部</button>
      </td>
    </tr>
    <tr>
      <td colspan="4" class="text-center text-muted">
        <p>No data yet....</p>
      </td>
    </tr>
  </table>
</div>
</body>
</html>

Step 2,Add modal box, the modal box is hidden by default

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="lib/"/>
  <script src="lib/jquery-1.7."></script>
  <script src="lib/"></script>
</head>
<body>
<div class="container">
  <form role="form">
    <div class="form-group">
      <label for="username">username:</label>
      <input type="text"  class="form-control" placeholder="Enter a username">
    </div>
    <div class="form-group">
      <label for="age">Year　age:</label>
      <input type="text"  class="form-control" placeholder="Input Age">
    </div>
    <div class="form-group">
      <input type="button" value="Add to" class="btn btn-primary">
      <input type="button" value="Reset" class="btn btn-danger">
    </div>
  </form>
  <hr>
  <table class="table table-bordered table-hover">
    <caption class="h2 text-info">User Information Table</caption>
    <tr class="text-danger">
      <th class="text-center">Serial number</th>
      <th class="text-center">name</th>
      <th class="text-center">Yearage</th>
      <th class="text-center">operate</th>
    </tr>
    <tr class="text-center">
      <td>1</td>
      <td>Zhang San</td>
      <td>20</td>
      <td>
        &lt;button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer">Delete</button>      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class="text-center"&gt;
      &lt;td&gt;2&lt;/td&gt;
      &lt;td&gt;Li Si&lt;/td&gt;
      &lt;td&gt;22&lt;/td&gt;
      &lt;td&gt;
        &lt;button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer">Delete</button>      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td colspan="4" class="text-right"&gt;
        &lt;button class="btn btn-danger btn-sm"&gt;Delete all&lt;/button&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td colspan="4" class="text-center text-muted"&gt;
        &lt;p&gt;No data yet....&lt;/p&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;

  &lt;!--Modal Box Popup box--&gt;
  &lt;div role="dialog" class="modal fade bs-example-modal-sm" &gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal"&gt;
            &lt;span&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
          &lt;h4 class="modal-title"&gt;Confirm to delete?&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body text-right"&gt;
          &lt;button data-dismiss="modal" class="btn btn-primary btn-sm"&gt;Cancel&lt;/button&gt;
          &lt;button data-dismiss="modal" class="btn btn-danger btn-sm"&gt;confirm&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;


&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Step 3,Define userList to save the user, userName saves the username, age saves the user variables, and then bind userName and age to the corresponding input box through the v-model instruction to realize the bidirectional driving of the input box and the data in the variables, and output userList in the rows of the table.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head lang="en"&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;link rel="stylesheet" href="lib/"/&gt;
  &lt;script src="lib/jquery-1.7."&gt;&lt;/script&gt;
  &lt;script src="lib/"&gt;&lt;/script&gt;
  &lt;script src="../js/"&gt;&lt;/script&gt;
  &lt;script&gt;
     = function () {
      var c = new Vue({
        el: '#box',
        data: {
          userList: [],
          userName : '',
          age : ''
        }
      });
    }
  &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="container" &gt;
  &lt;form role="form"&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="username"&gt;username:&lt;/label&gt;
      &lt;input type="text"  v-model="userName" class="form-control" placeholder="Enter a username"&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="age"&gt;Year　age:&lt;/label&gt;
      &lt;input type="text"  v-model="age" class="form-control" placeholder="Input Age"&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;input type="button" value="Add to" class="btn btn-primary"&gt;
      &lt;input type="button" value="Reset" class="btn btn-danger"&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  &lt;hr&gt;
  &lt;table class="table table-bordered table-hover"&gt;
    &lt;caption class="h2 text-info"&gt;User Information Table&lt;/caption&gt;
    &lt;tr class="text-danger"&gt;
      &lt;th class="text-center"&gt;Serial number&lt;/th&gt;
      &lt;th class="text-center"&gt;name&lt;/th&gt;
      &lt;th class="text-center"&gt;Yearage&lt;/th&gt;
      &lt;th class="text-center"&gt;operate&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr class="text-center" v-for="value in userList"&gt;
      &lt;td&gt;{{$index+1}}&lt;/td&gt;
      &lt;td&gt;{{}}&lt;/td&gt;
      &lt;td&gt;{{}}&lt;/td&gt;
      &lt;td&gt;
        &lt;button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer">Delete</button>      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td colspan="4" class="text-right"&gt;
        &lt;button class="btn btn-danger btn-sm"&gt;Delete all&lt;/button&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td colspan="4" class="text-center text-muted"&gt;
        &lt;p&gt;No data yet....&lt;/p&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;

  &lt;!--Modal Box Popup box--&gt;
  &lt;div role="dialog" class="modal fade bs-example-modal-sm" &gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal"&gt;
            &lt;span&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
          &lt;h4 class="modal-title"&gt;Confirm to delete?&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body text-right"&gt;
          &lt;button data-dismiss="modal" class="btn btn-primary btn-sm"&gt;Cancel&lt;/button&gt;
          &lt;button data-dismiss="modal" class="btn btn-danger btn-sm"&gt;confirm&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Step 4,Add user, click the Add button, push the data in the input box as an object to the array userList. After adding, clear userName and age, and the contents of the two input boxes will be cleared.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head lang="en"&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;&lt;/title&gt;
&lt;link rel="stylesheet" href="lib/"/&gt;
&lt;script src="lib/jquery-1.7."&gt;&lt;/script&gt;
&lt;script src="lib/"&gt;&lt;/script&gt;
&lt;script src="../js/"&gt;&lt;/script&gt;
&lt;script&gt;
 = function () {
var c = new Vue({
el: '#box',
data: {
userList: [],
userName : '',
age : ''
}
});
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="container" &gt;
&lt;form role="form"&gt;
&lt;div class="form-group"&gt;
&lt;label for="username"&gt;username:&lt;/label&gt;
&lt;input type="text"  v-model="userName" class="form-control" placeholder="Enter a username"&gt;
&lt;/div&gt;
&lt;div class="form-group"&gt;
&lt;label for="age"&gt;Year　age:&lt;/label&gt;
&lt;input type="text"  v-model="age" class="form-control" placeholder="Input Age"&gt;
&lt;/div&gt;
&lt;div class="form-group"&gt;
&lt;input type="button" value="Add to" class="btn btn-primary"&gt;
&lt;input type="button" value="Reset" class="btn btn-danger"&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;hr&gt;
&lt;table class="table table-bordered table-hover"&gt;
&lt;caption class="h2 text-info"&gt;User Information Table&lt;/caption&gt;
&lt;tr class="text-danger"&gt;
&lt;th class="text-center"&gt;Serial number&lt;/th&gt;
&lt;th class="text-center"&gt;name&lt;/th&gt;
&lt;th class="text-center"&gt;Yearage&lt;/th&gt;
&lt;th class="text-center"&gt;operate&lt;/th&gt;
&lt;/tr&gt;
&lt;tr class="text-center" v-for="value in userList"&gt;
&lt;td&gt;{{$index+1}}&lt;/td&gt;
&lt;td&gt;{{}}&lt;/td&gt;
&lt;td&gt;{{}}&lt;/td&gt;
&lt;td&gt;
&lt;button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer">Delete</button>&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td colspan="4" class="text-right"&gt;
&lt;button class="btn btn-danger btn-sm"&gt;Delete all&lt;/button&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td colspan="4" class="text-center text-muted"&gt;
&lt;p&gt;No data yet....&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

&lt;!--Modal Box Popup box--&gt;
&lt;div role="dialog" class="modal fade bs-example-modal-sm" &gt;
&lt;div class="modal-dialog"&gt;
&lt;div class="modal-content"&gt;
&lt;div class="modal-header"&gt;
&lt;button type="button" class="close" data-dismiss="modal"&gt;
&lt;span&gt;&amp;times;&lt;/span&gt;
&lt;/button&gt;
&lt;h4 class="modal-title"&gt;Confirm to delete?&lt;/h4&gt;
&lt;/div&gt;
&lt;div class="modal-body text-right"&gt;
&lt;button data-dismiss="modal" class="btn btn-primary btn-sm"&gt;Cancel&lt;/button&gt;
&lt;button data-dismiss="modal" class="btn btn-danger btn-sm"&gt;confirm&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Step 5,Combining the length of the array and the v-show instruction, the display and hiding prompt information is realized.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head lang="en"&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;link rel="stylesheet" href="lib/"/&gt;
  &lt;script src="lib/jquery-1.7."&gt;&lt;/script&gt;
  &lt;script src="lib/"&gt;&lt;/script&gt;
  &lt;script src="../js/"&gt;&lt;/script&gt;
  &lt;script&gt;
     = function () {
      var c = new Vue({
        el: '#box',
        data: {
          userList: [],
          userName : '',
          age : ''
        },
        methods : {
          addUser : function(){
            ({
              name : ,
              age : 
            });

             = ''; //After adding the user, clear the value of the input box             = '';
          }
        }
      });
    }
  &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="container" &gt;
  &lt;form role="form"&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="username"&gt;username:&lt;/label&gt;
      &lt;input type="text"  v-model="userName" class="form-control" placeholder="Enter a username"&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="age"&gt;Year　age:&lt;/label&gt;
      &lt;input type="text"  v-model="age" class="form-control" placeholder="Input Age"&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;input type="button" v-on:click="addUser();" value="Add to" class="btn btn-primary"&gt;
      &lt;input type="button" value="Reset" class="btn btn-danger"&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  &lt;hr&gt;
  &lt;table class="table table-bordered table-hover"&gt;
    &lt;caption class="h2 text-info"&gt;User Information Table&lt;/caption&gt;
    &lt;tr class="text-danger"&gt;
      &lt;th class="text-center"&gt;Serial number&lt;/th&gt;
      &lt;th class="text-center"&gt;name&lt;/th&gt;
      &lt;th class="text-center"&gt;Yearage&lt;/th&gt;
      &lt;th class="text-center"&gt;operate&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr class="text-center" v-for="value in userList"&gt;
      &lt;td&gt;{{$index+1}}&lt;/td&gt;
      &lt;td&gt;{{}}&lt;/td&gt;
      &lt;td&gt;{{}}&lt;/td&gt;
      &lt;td&gt;
        &lt;button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer">Delete</button>      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr v-show="!=0"&gt;
      &lt;td colspan="4" class="text-right"&gt;
        &lt;button class="btn btn-danger btn-sm"&gt;Delete all&lt;/button&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr v-show="==0"&gt;
      &lt;td colspan="4" class="text-center text-muted"&gt;
        &lt;p&gt;No data yet....&lt;/p&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;

  &lt;!--Modal Box Popup box--&gt;
  &lt;div role="dialog" class="modal fade bs-example-modal-sm" &gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal"&gt;
            &lt;span&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
          &lt;h4 class="modal-title"&gt;Confirm to delete?&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body text-right"&gt;
          &lt;button data-dismiss="modal" class="btn btn-primary btn-sm"&gt;Cancel&lt;/button&gt;
          &lt;button data-dismiss="modal" class="btn btn-danger btn-sm"&gt;confirm&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Step 6,Implement deletion of a row of data

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head lang="en"&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;link rel="stylesheet" href="lib/"/&gt;
  &lt;script src="lib/jquery-1.7."&gt;&lt;/script&gt;
  &lt;script src="lib/"&gt;&lt;/script&gt;
  &lt;script src="../js/"&gt;&lt;/script&gt;
  &lt;script&gt;
     = function () {
      var c = new Vue({
        el: '#box',
        data: {
          userList: [],
          userName : '',
          age : '',
          curIndex : -10
        },
        methods : {
          addUser : function(){
            ({
              name : ,
              age : 
            });

             = ''; //After adding the user, clear the value of the input box             = '';
          },
          deleteRow : function( n ){
            ( n, 1 );
          }
        }
      });
    }
  &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="container" &gt;
  &lt;form role="form"&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="username"&gt;username:&lt;/label&gt;
      &lt;input type="text"  v-model="userName" class="form-control" placeholder="Enter a username"&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="age"&gt;Year　age:&lt;/label&gt;
      &lt;input type="text"  v-model="age" class="form-control" placeholder="Input Age"&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;input type="button" v-on:click="addUser();" value="Add to" class="btn btn-primary"&gt;
      &lt;input type="button" value="Reset" class="btn btn-danger"&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  &lt;hr&gt;
  &lt;table class="table table-bordered table-hover"&gt;
    &lt;caption class="h2 text-info"&gt;User Information Table&lt;/caption&gt;
    &lt;tr class="text-danger"&gt;
      &lt;th class="text-center"&gt;Serial number&lt;/th&gt;
      &lt;th class="text-center"&gt;name&lt;/th&gt;
      &lt;th class="text-center"&gt;Yearage&lt;/th&gt;
      &lt;th class="text-center"&gt;operate&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr class="text-center" v-for="value in userList"&gt;
      &lt;td&gt;{{$index+1}}&lt;/td&gt;
      &lt;td&gt;{{}}&lt;/td&gt;
      &lt;td&gt;{{}}&lt;/td&gt;
      &lt;td&gt;
        &lt;button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" v-on:click="curIndex=$index">Delete</button>      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr v-show="!=0"&gt;
      &lt;td colspan="4" class="text-right"&gt;
        &lt;button class="btn btn-danger btn-sm"&gt;Delete all&lt;/button&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr v-show="==0"&gt;
      &lt;td colspan="4" class="text-center text-muted"&gt;
        &lt;p&gt;No data yet....&lt;/p&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;

  &lt;!--Modal Box Popup box--&gt;
  &lt;div role="dialog" class="modal fade bs-example-modal-sm" &gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal"&gt;
            &lt;span&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
          &lt;h4 class="modal-title"&gt;Confirm to delete?&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body text-right"&gt;
          &lt;button data-dismiss="modal" class="btn btn-primary btn-sm"&gt;Cancel&lt;/button&gt;
          &lt;button data-dismiss="modal" class="btn btn-danger btn-sm" v-on:click="deleteRow(curIndex);"&gt;confirm&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Step 7, implement deletion of all rows

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head lang="en"&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;link rel="stylesheet" href="lib/"/&gt;
  &lt;script src="lib/jquery-1.7."&gt;&lt;/script&gt;
  &lt;script src="lib/"&gt;&lt;/script&gt;
  &lt;script src="../js/"&gt;&lt;/script&gt;
  &lt;script&gt;
     = function () {
      var c = new Vue({
        el: '#box',
        data: {
          userList: [],
          userName: '',
          age: '',
          curIndex: -10
        },
        methods: {
          addUser: function () {
            ({
              name: ,
              age: 
            });

             = ''; //After adding the user, clear the value of the input box             = '';
          },
          deleteRow: function (n) {
            if (n == -1) { //When n=-1, clear the array and delete all               = [];
            } else {
              (n, 1);
            }
          }
        }
      });
    }
  &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="container" &gt;
  &lt;form role="form"&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="username"&gt;username:&lt;/label&gt;
      &lt;input type="text"  v-model="userName" class="form-control" placeholder="Enter a username"&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="age"&gt;Year　age:&lt;/label&gt;
      &lt;input type="text"  v-model="age" class="form-control" placeholder="Input Age"&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;input type="button" v-on:click="addUser();" value="Add to" class="btn btn-primary"&gt;
      &lt;input type="button" value="Reset" class="btn btn-danger"&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  &lt;hr&gt;
  &lt;table class="table table-bordered table-hover"&gt;
    &lt;caption class="h2 text-info"&gt;User Information Table&lt;/caption&gt;
    &lt;tr class="text-danger"&gt;
      &lt;th class="text-center"&gt;Serial number&lt;/th&gt;
      &lt;th class="text-center"&gt;name&lt;/th&gt;
      &lt;th class="text-center"&gt;Yearage&lt;/th&gt;
      &lt;th class="text-center"&gt;operate&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr class="text-center" v-for="value in userList"&gt;
      &lt;td&gt;{{$index+1}}&lt;/td&gt;
      &lt;td&gt;{{}}&lt;/td&gt;
      &lt;td&gt;{{}}&lt;/td&gt;
      &lt;td&gt;
        &lt;button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer"
            v-on:click="curIndex=$index"&gt;delete
        &lt;/button&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr v-show="!=0"&gt;
      &lt;td colspan="4" class="text-right"&gt;
        &lt;button class="btn btn-danger btn-sm" v-on:click="curIndex=-1" data-toggle="modal" data-target="#layer"&gt;
          delete全部
        &lt;/button&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr v-show="==0"&gt;
      &lt;td colspan="4" class="text-center text-muted"&gt;
        &lt;p&gt;No data yet....&lt;/p&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;

  &lt;!--Modal Box Popup box--&gt;
  &lt;div role="dialog" class="modal fade bs-example-modal-sm" &gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal"&gt;
            &lt;span&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
          &lt;h4 class="modal-title"&gt;confirmdelete么?&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body text-right"&gt;
          &lt;button data-dismiss="modal" class="btn btn-primary btn-sm"&gt;Cancel&lt;/button&gt;
          &lt;button data-dismiss="modal" class="btn btn-danger btn-sm" v-on:click="deleteRow(curIndex);"&gt;confirm
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.