Note:
1.v-model = "" for bi-directional data binding of input form logical layer and rendering layer
2.v-on:click='add() 'click method binding
3.v-for='(item,index) in myData' pass history group {} { {}} is applicable to vue version 2.0
4.v-for='(item,index,key) in myData' traverses json {} {} {} for vue version 2.0
5.v-on:click="currentUser=index" directly bind the data of click event change logic layer. currentUser here is the data of logic layer
6.v-show="myData.length!=0" v-show can directly use the data of logic layer to judge whether it is displayed or hidden according to the following Boolean values
7. < div class = "modal" role ='dialog 'id = "layer" > modal dialog is the mask ID used to contact trigger elements
8. Data toggle = 'modal' alternately displays the hidden mask frame. Data target = '(layer' determines the target modal box
9. Data dismission ='modal 'click to disappear the target element
Design sketch:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0" > <title>Document</title> <!-- Latest version of Bootstrap core CSS file --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.1.0/css/bootstrap.min.css"> <script src='../jquery-3.2.1.min.js'></script> <script src='bootstrap.js'></script> <script src='vue.js'></script> <style> table td </style> </head> <body> <div> <form action="" role='form'> <div> <label for="username">User name:</label> <input type="text" id="username" v-model="username" placeholder="enter one user name"> </div> <div> <label for="age">Age:</label> <input type="text" id="age" v-model="age" placeholder="Please enter age"> </div> <div> <input type="button" value="Add to" v-on:click='add()'> <input type="reset" value="Reset"> </div> </form> <table> <caption>User information table</caption> <tr> <th>Serial number</th> <th>Full name</th> <th>Age</th> <th>operation</th> </tr> <tr v-for='(item,index) in myData'> <td>{}</td> <td>{}</td> <td>{}</td> <td> <button data-toggle='modal' data-target='#Layer 'v-on: Click = "currentuser = index" > delete < / button > </td> </tr> <tr v-show="myData.length!=0"> <td colspan="4"> <button v-on:click='currentUser="all"' data-toggle='modal' data-target="#Layer "> delete all < / button > </td> </tr> <tr v-show="myData.length==0"> <td colspan="4"> <p>No data...</p> </td> </tr> </table> <div role='dialog' id="layer"> <div> <div> <div> <button data-dismiss='modal'> <span>×</span> </button> <h4>Are you sure to delete?</h4> </div> <div> <button data-dismiss='modal'>cancel</button> <button data-dismiss='modal' v-on:click="deleteuser()">confirm</button> </div> </div> </div> </div> </div> </body> </html>
<script> var c = new Vue({ el:'.container', data:{ myData:[ , , , ], username:"", age:"", currentUser :-100, }, methods : { deleteuser :function(){ if (this.currentUser == 'all') { this.myData = []; }else{ this.myData.splice(this.currentUser,1); } }, add : function(){ if (this.username!=""&&this.age!=0) { this.myData.push({ name:this.username, age:this.age }) } }, } }) </script>