利用vue.js设计一个方便在校学生使用的待办事项提醒应用程序(有代码)。该程序主要功能如下: 1. 使用HTML5表单完成界面设计。 2.待办事项处理。对已经完成的待办事项打上√标记,同时通过×按钮删除该事项。 3.状态显示栏设置。实现剩余项目数、全部按钮、待完成按钮、已完成按钮、清楚完成按钮等功能
时间: 2024-03-16 22:40:59 浏览: 46
好的,下面是一个简单的待办事项提醒应用程序的代码,使用了 Vue.js 和 Bootstrap:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>待办事项提醒应用程序</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<div id="app" class="container">
<h1 class="my-4">待办事项提醒应用程序</h1>
<form @submit.prevent="addTodo">
<div class="form-group">
<input type="text" class="form-control" v-model="newTodo" placeholder="添加新的待办事项">
</div>
<button type="submit" class="btn btn-primary">添加</button>
</form>
<hr>
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="card-header">
<h5 class="card-title">待完成</h5>
</div>
<ul class="list-group list-group-flush">
<li v-for="(todo, index) in todos" v-if="!todo.completed" class="list-group-item">
<input type="checkbox" v-model="todo.completed"> {{ todo.text }}
<button class="close" aria-label="Close" @click="removeTodo(index)"><span aria-hidden="true">×</span></button>
</li>
</ul>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-header">
<h5 class="card-title">已完成</h5>
</div>
<ul class="list-group list-group-flush">
<li v-for="(todo, index) in todos" v-if="todo.completed" class="list-group-item">
<input type="checkbox" v-model="todo.completed" disabled> {{ todo.text }}
<button class="close" aria-label="Close" @click="removeTodo(index)"><span aria-hidden="true">×</span></button>
</li>
</ul>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-header">
<h5 class="card-title">状态显示栏</h5>
</div>
<div class="card-body">
剩余项目数:{{ remainingTodos }}<br>
<button class="btn btn-secondary" @click="showAllTodos">全部</button>
<button class="btn btn-secondary" @click="showRemainingTodos">待完成</button>
<button class="btn btn-secondary" @click="showCompletedTodos">已完成</button>
<button class="btn btn-secondary" @click="clearCompletedTodos">清除完成</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
todos: [
{ text: '学习Vue.js', completed: false },
{ text: '编写应用程序', completed: false },
{ text: '发布到GitHub', completed: false }
],
newTodo: ''
},
methods: {
addTodo: function() {
if (this.newTodo.trim() !== '') {
this.todos.push({ text: this.newTodo, completed: false });
this.newTodo = '';
}
},
removeTodo: function(index) {
this.todos.splice(index, 1);
},
showAllTodos: function() {
this.todos.forEach(function(todo) {
todo.hidden = false;
});
},
showRemainingTodos: function() {
this.todos.forEach(function(todo) {
todo.hidden = todo.completed;
});
},
showCompletedTodos: function() {
this.todos.forEach(function(todo) {
todo.hidden = !todo.completed;
});
},
clearCompletedTodos: function() {
this.todos = this.todos.filter(function(todo) {
return !todo.completed;
});
}
},
computed: {
remainingTodos: function() {
return this.todos.filter(function(todo) {
return !todo.completed;
}).length;
}
}
});
</script>
</body>
</html>
```
代码解释:
- 首先引入了 Bootstrap 的样式和 Vue.js 库。
- 在 HTML 中定义了一个 id 为 app 的 div 容器,用于 Vue.js 渲染。
- 在 Vue.js 中定义了两个数据属性:todos 和 newTodo。todos 是一个数组,用于存储待办事项列表;newTodo 是一个字符串,用于存储用户输入的新待办事项。
- 在 Vue.js 中定义了四个方法:addTodo、removeTodo、showAllTodos、showRemainingTodos、showCompletedTodos 和 clearCompletedTodos。addTodo 用于添加新的待办事项;removeTodo 用于删除某个待办事项;showAllTodos、showRemainingTodos 和 showCompletedTodos 用于筛选显示待办事项;clearCompletedTodos 用于清除已完成的待办事项。
- 在 Vue.js 中定义了一个计算属性 remainingTodos,用于计算剩余未完成的待办事项数量。
- 在 HTML 中使用 Bootstrap 的表单组件定义了一个输入框和添加按钮。
- 在 HTML 中使用 Bootstrap 的卡片组件定义了三个卡片,分别用于显示待完成的待办事项、已完成的待办事项和状态显示栏。在卡片中使用了 Vue.js 的指令 v-for、v-if、v-model 和 @click,用于动态渲染待办事项列表、筛选显示待办事项、实现待办事项的勾选和删除操作、以及响应用户的点击事件。
- 在 HTML 中引入了 Vue.js 应用程序的脚本,用于初始化 Vue.js 实例和绑定数据和方法。