todoList Vue3精简版
<script src="./js/"></script>
<script>
const app = Vue.createApp({
watch: {
// 本地存储数据
"list": {
handler(nval) {
localStorage.setItem("list", JSON.stringify(this.list));
},
deep: true
}
},
computed: {
// 过滤已完成
"doneList": function () {
return this.list.filter(item => item.done)
},
// 过滤未完成
"undoList": function () {
return this.list.filter(item => !item.done)
}
},
data() {
return {
list: JSON.parse(localStorage.getItem("list" || "[]")),
temp: '' //存放输入的数据
}
},
methods: {
addItem() {
this.list.unshift({
title: this.temp,
done: false
});
//列表清空
this.temp = "";
},
removeItem(item) {
var idx = this.list.indexOf(item);
this.list.splice(idx, 1)
}
}
}).mount(".app")
</script>