用vue代码写一个日程中心
时间: 2023-12-13 22:04:22 浏览: 27
以下是一个简单的日程中心,使用Vue框架实现。
HTML部分:
```
<div id="app">
<h1>日程中心</h1>
<form>
<label for="task">任务:</label>
<input type="text" id="task" v-model="newTask">
<label for="date">日期:</label>
<input type="date" id="date" v-model="newDate">
<button @click.prevent="addTask">添加任务</button>
</form>
<ul>
<li v-for="(task, index) in tasks">
<strong>{{ task.title }}</strong> - {{ task.date }}
<button @click="deleteTask(index)">删除</button>
</li>
</ul>
</div>
```
JavaScript部分:
```
new Vue({
el: '#app',
data: {
newTask: '',
newDate: '',
tasks: []
},
methods: {
addTask: function () {
this.tasks.push({
title: this.newTask,
date: this.newDate
});
this.newTask = '';
this.newDate = '';
},
deleteTask: function (index) {
this.tasks.splice(index, 1);
}
}
});
```
该日程中心包括一个表单,用户可以在表单中输入任务和日期。提交表单后,任务将被添加到任务列表中。用户还可以单击每个任务旁边的删除按钮来删除任务。