<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ToDoList</title> <link rel="stylesheet" href="dist/css/bootstrap.min.css"> <script src="vue.min.js"></script> </head> <body> <div id="box" class="container"> <div class="row clearfix"> <div class="col-md-12 column"> <div class="form-group"> <label for="exampleInputEmail1">用户名</label><input type="text" class=" user form-control" id="exampleInputEmail1" /> </div> <div class="form-group"> <label for="exampleInputPassword1">密码</label><input type="password" class=" psd form-control" id="exampleInputPassword1" /> </div> <button style="300px;margin: 10px auto" @click="submit()" >Submit</button> </div> <div class="col-md-12 column"> <table class="table table-striped"> <thead> <tr> <th class="col-md-2"> 编号 </th> <th class="col-md-4"> 姓名 </th> <th class="col-md-4"> 密码 </th> <th class="col-md-2"> <button type="button" class="btn btn-default btn-primary">按钮</button> </th> </tr> </thead> <tbody> <tr v-for="(m, index) in msg">
<!--官方文档声明：$index和$key被移除 --> <td> {{ index+1 }} </td> <td> {{ m[0] }} </td> <td> {{ m[1] }} </td> <td> <button type="button" class="btn btn-default btn-primary" v-on:click="getIndex(index)">删除</button> </td> </tr> </tbody> </table> </div> </div> </div> <script> var vm=new Vue({ el:"#box", data:{ msg:[["user","123456"],["admin","123"]] }, methods:{ getIndex: function(index){ vm.msg.splice(index,1); }, submit:function(){ var arr=[] var user=document.querySelector(".user").value; var psd=document.querySelector(".psd").value; arr.push(user); arr.push(psd); vm.msg.push(arr); } } }); </script> </body> </html>
纯属自娱，看客见谅。。。