<html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" /> <script src="js/vue.js"></script> <style> </style> </head> <body> <div class="container" id="app"> <div class="form-group"> <div class="container-fluid text-center"> </div> <h1>TODO列表</h1> <div class="row"> <div class="col-9 "> <input type="text" class="form-control" placeholder="请输入待做事项" v-model="todo" /> </div> <div class="col-1 "> <button class="btn btn-primary" @click="update(index)">增加</button> </div> </div> <h2>待完成列表</h2> <hr /> <table class="table table-bordered"> <tr> <th>编号</th> <th>内容</th> <th>操作</th> </tr> <tr v-for="(a,index) in Ntodos"> <td>{{index+1}}</td> <td>{{a.todo}}</td> <td> <button class="btn btn-primary" @click="del(index)">完成</button> </td> </tr> </table> <hr> <hr> <h2>已完成列表</h2> <div class="row"> <div class="col-9 "> <input type="text" class="form-control" placeholder="请输入要搜索的事项" v-model="serchContent" /> </div> <div class="col-1 "> <button class="btn btn-primary" @click="searchCont">搜索</button> </div> </div> <hr /> <table class="table table-bordered"> <tr> <th>编号</th> <th>内容</th> <th>状态</th> </tr> <tr v-for="(b,index) in Ntodoed"> <td>{{index+1}}</td> <td>{{b.todoed}}</td> <td> 已完成 </td> </tr> </table> </div> </body> <script> var vm = new Vue({ el: "#app", data: { todo: "", searchContent:"", todoed:"", //用于交换值 Result:[{ todoed: "第1项计划", }, { todoed: "第2项计划", }, { todoed: "第3项计划", }], Ntodos: [], // 创建一个已完成的数组 Ntodoed: [{ todoed: "第1项计划", }, { todoed: "第2项计划", }, { todoed: "第3项计划", }] }, methods: { searchCont(){ this.Result= this.Ntodoed.filter((text) => { return todoed.match(searchContent); } )}, add() { var index = this.Ntodos.findIndex(item => item.todo == this.todo); if (index == -1) { this.Ntodos.push({ todo: this.todo, }) } }, del(index) { //将这个删除的值传入已完成的列表 this.Ntodoed.push({ todoed:this.todo }) this.Ntodos.splice(index, 1); }, update(index) { //splice(index+1,0,对象) //从index开始添加“对象”到此数组中 this.Ntodos.splice(index + 1, 0, { todo: this.todo, }); } }, }) </script> </html>
