效果图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" @keyup.enter="addItem">
<!-- 遍历数据list -->
<div class="un">
<h3>未完成{
{undolist.length}}</h3>
<div v-for="item in undolist" :key="item.id">
<input type="checkbox" v-model="item.done">
<span>{
{item.title}}</span>
<button @click="delItem(item)">x</button>
</div>
</div>
<div class="do">
<h3>已经完成{
{donelist.length}}</h3>
<div v-for="item in donelist" :key="item.id">
<input type="checkbox" v-model="item.done">
<span>{
{item.title}}</span>
<button @click="delItem(item)">x</button>
</div>
</div>
</div>
<script>
new Vue({
el:"#app",
computed:{
// 通过计算list算出undolist没有完成的列表
undolist(){
// 通过list过滤 返回item.done值为false的所有元素
return this.list.filter(item=>!item.done);
},
donelist(){
// 返回保留item.done值为true的元素
return this.list.filter(item=>item.done);
}
},
methods:{
// 删除元素
delItem(item){
if (confirm("确定要删除我么？")) {
// 查找item在list的下标
var ind = this.list.indexOf(item);
// 进行删除
this.list.splice(ind,1);
}
},
// 添加元素
addItem(e){
// e.target输入的文本框
// e.target.value 文本框的值
this.list.push(
{
done:false,
title:e.target.value,
id: this.list.length === 0 ? 1 : this.list[this.list.length - 1].id + 1
}
)
// 清空文本框的内容
e.target.value = "";
}
},
data(){
return {
list:[
// {done:true,title:"学习html"}
]
}
}
})
// 目标：1 在文本框输入文字，按回车，文字添加到list里面
// 目标：2 单击x 删除当前行
// unshift在数组的前面添加一个元素
// splice（n，m，j） 从第n个删除m个，添加j
// indexOf(item) 查找item在列表的下标
</script>
</body>
</html>