Vue中TodoLists案例_底部交互

**Vue 中 TodoList 案例**

在本文中，我们将创建一个简单的 TodoList 应用，展示 Vue 的基本使用方法。我们将重点关注底部交互的实现。

###1. 创建项目首先，我们需要创建一个新的 Vue项目。可以使用以下命令：

bashnpm create vite@latest my-todolist -- --template vue

bashcd my-todolist

bashnpm install

bashnpm run dev

vue<template>
 <div class="todo-list">
 <!-- TodoList 列表 -->
 <ul>
 <li v-for="(item, index) in todoList" :key="index">
 {{ item }}
 <button @click="deleteItem(index)">删除</button>
 </li>
 </ul>

 <!-- TodoList 输入框 -->
 <input type="text" v-model="newTodo" placeholder="输入新任务..." />
 <button @click="addTodo">添加</button>
 </div>
</template>

<script>
export default {
 data() {
 return {
 todoList: [],
 newTodo: ''
 }
 },
 methods: {
 addTodo() {
 if (this.newTodo.trim() !== '') {
 this.todoList.push(this.newTodo)
 this.newTodo = ''
 }
 },
 deleteItem(index) {
 this.todoList.splice(index,1)
 }
 }
}
</script>

<style scoped>
.todo-list {
 width:300px;
 margin:50px auto;
}

ul {
 list-style: none;
 padding:0;
 margin:0;
}

li {
 padding:10px;
 border-bottom:1px solid #ccc;
}

button {
 margin-left:10px;
}
</style>

vue<template>
 <div class="app">
 <!-- TodoList -->
 <TodoList />

 <!-- Footer -->
 <footer>
 <p>Copyright &copy;2023</p>
 </footer>
 </div>
</template>

<script>
import TodoList from './TodoList.vue'

export default {
 components: { TodoList }
}
</script>

<style scoped>
.app {
 max-width:800px;
 margin:50px auto;
}

footer {
 text-align: center;
 padding:10px;
 background-color: #f0f0f0;
 border-top:1px solid #ccc;
}
</style>

bashnpm run dev