<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="../bootstrap.css"> <title>Document</title> <script src="jquery.min.js"></script> <script src="../bootstrap.js"></script> <script src="../vue.min.js"></script> <script> window.onload=function(){ new Vue({ el:"#box", data:{ mydata:[ // {name:"航三",age:"12"} ], username:"", userage:"", nowIndex:-100 }, methods:{ add:function(){ this.mydata.push({ name:this.username, age:this.userage }); this.username=""; this.userage=""; }, deleteMsg:function(n){ if(n==-2){ this.mydata=[] }else{ this.mydata.splice(n,1) } } } }); }; </script> </head> <body> <div class="container" id="box"> <form> <div class="form-group"> <label>用户名：</label> <input type="text" class="form-control" placeholder="请输入用户名" v-model="username"> </div> <div class="form-group"> <label>年龄：</label> <input type="text" class="form-control" placeholder="请输入年龄" v-model="userage"> </div> <button type="button" class="btn btn-info" v-on:click="add()">添加</button> <button type="reset" class="btn btn-danger">重置</button> <div class="table-responsive"> <table class="table-bordered table"> <tr> <th>序号</th> <th>名字</th> <th>年龄</th> <th>操作</th> </tr> <tr v-for="(x,index) in mydata"> <td>{{index+1}}</td> <td>{{x.name}}</td> <td>{{x.age}}</td> <td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#myclick" v-on:click="nowIndex=index">删除</button></td> </tr> <tr v-show="mydata.length!=0"> <td colspan="4" class="text-right"><button type="button" class="btn btn-danger btn-sm" v-on:click="nowIndex=-2" data-toggle="modal" data-target="#myclick">删除全部</button></td> </tr> <tr v-show="mydata.length==0"> <td colspan="4" class="text-center"><p>暂无数据。。。</p></td> </tr> </table> </div> </form> <!-- 模态框 --> <div id="myclick" role="dialog" class="modal"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" v-if="nowIndex!=-2">是否确定删除</h4> <h4 class="modal-title" v-else>是否确定删除全部</h4> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" class="btn btn-primary" v-on:click="deleteMsg(nowIndex)" data-dismiss="modal">确认</button> </div> </div> </div> </div> </div> </div> </body> </html>
vue的 简单表格例子 v-if v-show v-model
原文：https://www.cnblogs.com/mm152534/p/10395886.html