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

最新推荐文章于 2024-09-24 10:41:43 发布

外下羊.

最新推荐文章于 2024-09-24 10:41:43 发布

阅读量2.9k

点赞数 4

分类专栏： Vue 文章标签： vue es6

本文链接：https://blog.csdn.net/Rick_and_mode/article/details/107044733

版权

Vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

**Todolist综合案例（一）

Todolist Vue.js基本实现方法

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

这边是效果实现图

在这里插入图片描述
首先我们先基本引入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>
      <!-- 使用v-for进行遍历 -->
      <!-- v-show显示或隐藏的 完成和未完成的 把item打印的数据进行判断-->
      <li v-for="(item,index) in arry" :key="index" v-show="item.iscu==false">
        <!-- 给input一个点击事件判断选中是不是选中到完成到已完成里面 -->
        <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>
    <!-- 使用v-for进行遍历 -->
    <!-- v-show显示或隐藏的 完成和未完成的 把item打印的数据进行判断-->
    <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部分的写法了

<script>
export default {
  data() {
    return {
      list: "", //一个的空的 来接受数据
      arry: [], //一个空的数组来接受数据
      uplist: -1, //要求修改元素的下标
      value: ""
    };
  },
  created() {
    //组件初始化  一开始就把本地数据加载出来
    let arry = localStorage.arry;
    if (arry) {
      // 用if判断把本地数据保存
      this.arry = JSON.parse(arry);
    }
  },
  methods: {
    add() {
      this.arry.push({
        title: this.list,
        iscu: false //判断完成状态 默认是未完成
      });
      this.list = "";
      //给一个空的
      this.save(); //保存数据到本地
    },
    del(index) {
      this.arry.splice(index, 1); //删除
      this.save(); //保存数据到本地
    },
    yes(item) {
      //判断input的选中是完成状态 利用上面的v-show判断
      item.iscu = true;
      this.save(); //保存数据到本地
    },
    no(item) {
      //判断input的选中是未完成状态 利用上面的v-show判断
      item.iscu = false;
      this.save(); //保存数据到本地
    },
    //为了保证页面刷新数据不会消失把数据保存到本地
    save() {
      localStorage.arry = JSON.stringify(this.arry); //保存数据到本地
    },

    eat(item, index) {
      this.uplist = index;
      this.value = item.title;
    },
    off() {
      this.uplist = -1;
      this.save();
    }
  },
  computed: {
    //计算属性 计算判断正在进行和完成的数组长度
    Yeslength() {
      let num = 0;
      this.arry.map(item => {
        if (item.iscu) {
          num++;
        }
      });
      return num;
    },
    Nolength() {
      let num = 0;
      this.arry.map(item => {
        //已经完成的数据可以跟上面一样取反就行了
        if (!item.iscu) {
          num++;
        }
      });
      return num;
    }
  }
};
</script>

**这边一个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不存在的时候赋值会出错误。**