vue 部分

<template id="app">
?<div class="main-content">
? ?<span>任務(wù)事項</span>
? ?<form @submit.prevent="add_task">
? ? ?<input class="input-text" v-model="task_text" placeholder="添加待辦事項" />
? ? ?<button class="add_btn">添加</button>
? ?</form>
? ?<ol>
<!-- ? ? ?通過v-for實現(xiàn)循環(huán)渲染-->
? ? ?<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{
? ? ?// 待辦任務(wù)
? ? ?todos: [],
? ? ?task_text: '',
? ?}
?},
?methods:{
? ?// 添加一個任務(wù)
? ?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;
}

效果圖部分