todolist vue
时间: 2024-01-08 22:03:34 浏览: 22
As an AI language model, I can provide you with a basic todolist app in Vue. Here's the code:
```
<template>
<div>
<h1>Todo List</h1>
<form>
<label for="task">Task:</label>
<input id="task" v-model="newTask" placeholder="Type a new task">
<button type="submit" @click.prevent="addTask">Add</button>
</form>
<ul>
<li v-for="(task, index) in tasks" :key="index">{{ task }} <button @click="deleteTask(index)">X</button></li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
newTask: "",
tasks: [],
};
},
methods: {
addTask() {
if (this.newTask !== "") {
this.tasks.push(this.newTask);
this.newTask = "";
}
},
deleteTask(index) {
this.tasks.splice(index, 1);
},
},
};
</script>
```
This app has a form to add new tasks to a list and a button to delete them. The tasks are stored in an array in the data object and rendered in a list using a v-for loop. The addTask() method checks if the input field is not empty and pushes the new task to the array. The deleteTask() method removes the task at the specified index using the splice() method.