写一个vue代码实现刷新不会消失的个人todolist任务清单功能。
时间: 2023-04-09 08:01:28 浏览: 144
好的,以下是一个简单的 Vue 代码实现刷新不会消失的个人todolist任务清单功能:
```
<template>
<div>
<h1>My Todo List</h1>
<input v-model="newTodo" @keyup.enter="addTodo">
<button @click="addTodo">Add</button>
<ul>
<li v-for="(todo, index) in todos" :key="index">
{{ todo }}
<button @click="deleteTodo(index)">Delete</button>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
newTodo: '',
todos: []
}
},
mounted() {
if (localStorage.getItem('todos')) {
this.todos = JSON.parse(localStorage.getItem('todos'))
}
},
methods: {
addTodo() {
if (this.newTodo.trim() !== '') {
this.todos.push(this.newTodo.trim())
this.newTodo = ''
localStorage.setItem('todos', JSON.stringify(this.todos))
}
},
deleteTodo(index) {
this.todos.splice(index, 1)
localStorage.setItem('todos', JSON.stringify(this.todos))
}
}
}
</script>
```
这个代码实现了一个简单的个人todolist任务清单功能,可以添加、删除任务,并且在刷新页面后任务清单不会消失,因为使用了 localStorage 来保存任务清单。
阅读全文