vue 设计一个简单待办任务的应用
来源：哔哩哔哩 2023-04-22 11:57:15
【资料图】
vue 部分
<template id="app"> <div class="main-content"> <span>任务事项</span> <form @submit.prevent="add_task"> <input class="input-text" v-model="task_text" placeholder="添加待办事项" /> <button class="add_btn">添加</button> </form> <ol><!-- 通过v-for实现循环渲染--> <li v-for="(item, index) in todos"> {{item}} <button class="del-btn" @click="remove(index)">删除</button> <hr/> </li> </ol> </div></template><script>export default { name: "Todo", data(){ return{ // 待办任务 todos: [], task_text: '', } }, methods:{ // 添加一个任务 add_task(){ if (this.task_text.length === 0){ alert('请输入待办事项') return } this.todos.push(this.task_text) this.task_text = "" }, // 删除长度为1的index remove(index){ this.todos.splice(index, 1) } }}</script><style scoped> @import "@/assets/todo.css";</style>
css 部分
.main-content{ height: 350px; width: 500px; background-image:linear-gradient(0deg, #85c4e5 0%, #b0dcef 50%, #b0dcef 50%, #85c4e5 100%);}span{ display: inline-flex; width: 500px; justify-content: center; margin-top: 20px; font-family: 楷体, sans-serif; color: #9031a1; letter-spacing: 5px;}form{ margin-top: 10px; margin-left: 50px;}.input-text{ width: 300px; height: 18px; font-size: 10px; font-family: 楷体,sans-serif; background-color: #e2d1f3; letter-spacing: 3px;}.add_btn{ margin-left: 20px; background-color: #e2d1f3; letter-spacing: 3px; color: #186faf;}hr{ margin-left: 0; width: 400px; border: 1px solid #ddb0ea;}li{ margin-top: 15px; margin-left: 10px; font-family: 楷体, sans-serif; list-style: circle; color: #096b20; letter-spacing: 3px;}.del-btn{ height: 20px; background-color: #e2d1f3; font-family: 楷体,sans-serif; border-color: #9fa4a6; color: #3e78c4; letter-spacing: 3px;}
效果图部分
