todolist效果实现

效果展示

 

 一，说明：todolist实现

ToDoList无须注册即可使用,数据存储在用户浏览器的html5本地数据库里,是最简单最安全的待办事项列表应用!

要用到的只要技术有：

1. element组件库

2. filter过滤

3. 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">