效果展示
一,说明:todolist实现
ToDoList无须注册即可使用,数据存储在用户浏览器的html5本地数据库里,是最简单最安全的待办事项列表应用!
要用到的只要技术有:
- element组件库
-
filter过滤
-
v-for
二,过程:todolist过程
todolist效果概要:
1.实现回车保存数据
2.实现全选反选效果
3.单选改为完成
4.选中删除
5.计算上传条数
6.划过显示删除按键
7.删除本条数据
三,实现效果
1.首先通过vue create todolist 创建好todolist项目
选中这三项即可
2.传好项目后我们就该写静态页面了,这边已经全都弄好了就不细分了,这段包含了所有的效果实现,这段写在home.vue中即可
<template>
<div>
<section class="todoapp">
<header class="header">
<h1>todos</h1>
<input
class="new-todo"
autofocus
placeholder="What needs to be done?"
v-model="val"
@keyup.enter="add"
/>
</header>
<section class="main" v-cloak>
<input
id="toggle-all"
class="toggle-all"
type="checkbox"
v-model="select"
/>
<label for="toggle-all" v-show="list.length != 0"></label>
<ul class="todo-list">
<li
class="todo checked"
v-for="(item, index) in showList"
:key="item.id"
>
<div class="view">
<input class="toggle" type="checkbox" v-model="item.finished" />
<label :class="{ completed: item.finished }">{
{
item.title
}}</label>
<button class="destroy" @click="remove(index)"></button>
</div>
</li>
</ul>
</section>
<footer class="footer" v-show="list.length != 0">
<span class="todo-count">
<strong> {
{ num }} </strong> {
{ num | numFilter }} left
</span>
<ul class="filters">