vue 设计一个简单待办任务的应用

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;
}

效果图部分