You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
1.4 KiB
77 lines
1.4 KiB
<template>
|
|
<div id="app">
|
|
<h1>To-Do List</h1>
|
|
|
|
<!-- 输入框和提交按钮 -->
|
|
<div>
|
|
<input
|
|
v-model="newTask"
|
|
type="text"
|
|
placeholder="添加新的任务"
|
|
@keyup.enter="addTask"
|
|
/>
|
|
<button @click="addTask">添加任务</button>
|
|
</div>
|
|
|
|
<!-- 任务列表 -->
|
|
<ul>
|
|
<li v-for="(task, index) in tasks" :key="index">
|
|
<span>{{ task }}</span>
|
|
<button @click="removeTask(index)">删除</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'App',
|
|
data() {
|
|
return {
|
|
newTask: '', // 输入框绑定的数据
|
|
tasks: [], // 任务列表数组
|
|
};
|
|
},
|
|
methods: {
|
|
addTask() {
|
|
if (this.newTask.trim()) {
|
|
this.tasks.push(this.newTask.trim()); // 添加任务
|
|
this.newTask = ''; // 清空输入框
|
|
}
|
|
},
|
|
removeTask(index) {
|
|
this.tasks.splice(index, 1); // 删除任务
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
/* 简单的样式 */
|
|
#app {
|
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
|
text-align: center;
|
|
margin-top: 60px;
|
|
}
|
|
input {
|
|
padding: 10px;
|
|
font-size: 16px;
|
|
margin-right: 10px;
|
|
}
|
|
button {
|
|
padding: 10px 15px;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
}
|
|
ul {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
}
|
|
li {
|
|
background-color: #f9f9f9;
|
|
padding: 10px;
|
|
margin: 5px 0;
|
|
border-radius: 5px;
|
|
}
|
|
</style>
|