如图 点击滑板选项 自动下滑到已完成 已完成后面的数字+1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
li {
list-style: none;
}
</style>
</head>
<body>
<div id="app">
<input type="text" v-model='obj.title' @keyup.enter='addTask'>
<h3>未完成{{unList.length}}</h3>
<ul>
<li v-for="(item,index) in unList">
<input type="checkbox" v-model='item.done' :key='item.title'>
<span>{{item.title}}</span>
<button @click='delTask(item)'>X</button>
</li>
</ul>
<h3>已完成{{doList.length}}</h3>
<ul>
<li v-for="(item,index) in doList">
<input type="checkbox" v-model='item.done' :key='item.title'>
<span>{{item.title}}</span>
<button @click='delTask(item)'>X</button>
</li>
</ul>
</div>
<!-- 引入vue -->
<script src="./js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
obj: {
title: '',
done: false
},
list: localStorage.task == undefined ? [] : JSON.parse(localStorage.task) //存放人物列表
},
methods: {
addTask() {
// this.list.unshift({title:this.obj.title,done:false});
//将obj的属性全部拷贝到当前对象
this.list.unshift({
...this.obj
});
this.obj = {
title: '',
done: false
};
},
delTask(obj) {
//获取删除的下标
let index = this.list.indexOf(obj);
this.list.splice(index, 1);
}
},
computed: {
//过滤出合适的数据
unList() {
return this.list.filter(obj => {
return !obj.done
})
},
doList() {
return this.list.filter(obj => {
return obj.done
})
}
},
watch: {
//实时监听list中的数据 有变化更新本地存储
'list': {
deep: true,
handler() {
localStorage.task = JSON.stringify(this.list);
}
}
}
})
</script>
</body>
</html>
版权声明：本文为weixin_62394372原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。