Vue.js简单实现Todolist综合案例（一）选择完成或未完成双击修改文本内容

我不是女神ヾ 2021-07-24 23:10 548阅读 0赞

\*\***Todolist综合案例（一）**

# Todolist Vue.js基本实现方法 #

我们先明白todolist这个案例的基本实现方法  
循环遍历方法跟套用事件方法 比如 **v-for v-if** 这些常用的方法  
todolist案例实用各种项目 基本样式也不会太大变化 说白了就是在俄罗斯套娃  
我也是刚刚入门的新手

## 这边是效果实现图 ##

![在这里插入图片描述][20200630191913817.gif]  
**首先我们先基本引入Vue.js的环境**

cnpm install -g @vue/cli

**然后在创建Vue的基本项目**

vue create myapp

**然后直接cd 进去项目myapp启动就行**

cd myapp

**然后就正常启动**

npm run serve

## 好了我们进入正题 ##

**我们先想一下todolist的大概流程**  
1.如图，文本框输入计划事件，回车之后，事件会出现在“正在进行”区域中，文本框清空。  
2.点击事件前对应的复选框，事件会移至“已经完成”区域中，反之取消复选框勾选，事件会返回至“正在进行”区域中。  
3.点击删除按钮，对应事件将会被删除。  
4.刷新页面，数据不会清空（本地存储）。  
5.点击“清除本地存储”按钮，刷新页面，数据将会清空

**这边我们先写基本的CSS布局样式**

<template>
      <div>
        
        <input type="text" v-model="list" @keydown.enter="add" />
        
        <h3>正在进行的{ { Nolength}}</h3>
        <ul>
          
          
          <li v-for="(item,index) in arry" :key="index" v-show="item.iscu==false">
            
            <input type="checkbox" @click.prevent="yes(item)" />
            <span class="item_title" v-if="uplist !=index" @click="eat(item,index)">{ { item.title}}</span>
            <input
              type="text"
              v-if="uplist==index"
              v-model="item.title"
              @keydown.enter="off"
              @blur="off"
            />
            
            <button @click="del(index)">删除</button>
          </li>
        </ul>
        
        <h3>已经完成了{ { Yeslength}}</h3>
        
        
        <li v-for="(item,index) in arry" :key="index" v-show="item.iscu==true">
          <input type="checkbox" checked @click.prevent="no(item)" />
          <span class="item_title" v-if="uplist !=index" @click="eat(item,index)">{ { item.title}}</span>
          <input type="text" v-if="uplist==index" v-model="item.title" @keydown.enter="off" @blur="off" />
          
          <button @click="del(index)">删除</button>
        </li>
      </div>
    </template>

**上面就是基本css布局 每一步都打了注释 已经是很详细了**  
**下面开始js部分的写法了**

\*\*这边一个todolist的基本写法已经完成了

## 在给提几点建议跟注意事项 ##

1.通过监听键盘的回车键，出发add方法，将输入的事件push进todoList中。其中，监听回车键是通过获取到keyCode判断是否为13来实现；push到todoList中的是一个对象，有things和isOver两个key值，其中things是事件内容，isOver是布尔类型，判断事件是否完成。

2.事件前面的checkbox需要与判断状态的变量（即data里面todoList的isOver）进行双向数据绑定，点击或取消勾选将会改变isOver的布尔值，通过此布尔值可以令事件有依据的出现在相应的区域中（未完成还是已结束）。未完成和已结束下的区域是两个不同的ui>li，利用v-for判断isOver的布尔值，从而对todoList中的数据进行渲染。

3.关于数据本地存储，通过localStorage.setItem()和localStorage.getItem()将todoList进行存储和获取。其中，当用户进行增加事件、删除事件、改变事件状态这三种操作时，均需要执行localStorage.setItem()。而获取本地存储的localStorage.getItem()则需要在mounted()生命周期函数中执行，实现打开网页时进行数据请求。

4.封装方法，对本地存储中数据的设置、获取、删除三个方法进行封装

5.注意数据存储时的类型，存时需要将数据转化成JSON字符串，获取时需要将数据转回JSON对象。  
6.在取到localStorage中的list时，需要先判断是否存在，存在才能进行下一步的赋值给list\[\]数组，否则当list不存在的时候赋值会出错误。\*\*

[20200630191913817.gif]: /images/20210724/dedb90a42c77424fbcac84bf25ee6e29.png