<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>
标签：index,todoed,Ntodos,splice,test,todo,Ntodoed From： https://www.cnblogs.com/yhyh296/p/17310876.html