vue实现todoList

最新推荐文章于 2024-04-08 15:45:39 发布

奥佳博客（王小政）

最新推荐文章于 2024-04-08 15:45:39 发布

阅读量384

点赞数 2

分类专栏： vue 文章标签： js

本文链接：https://blog.csdn.net/wang159477/article/details/115583878

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

前言

一共有2种todoList，实现的过程也是把上面的功能一个一个实现即可提示：以下是本篇文章正文内容，下面案例可供参考

1.复杂版的todoList

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
    </style>
</head>
<body>
    <div class="page-top">
        <div class="page-content">
            <h2>任务计划列表</h2>
        </div>
    </div>
    <div class="main">
        <h3 class="big-title">添加任务：</h3>
        <input placeholder="回车即可添加任务" type="text" v-on:keyup.enter="enterFn"
            v-model="todo" />
        <ul class="task-count">
            <li>{{unComplete}}个任务未完成</li>
            <li class="action">
                <a href="#all">所有任务</a>
                <a href="#unCompleted">未完成的任务</a>
                <a href="#completed">完成的任务</a>
            </li>
        </ul>
        <h3 class="big-title">任务列表：</h3>
        <div class="tasks">
            <span v-show="!list.length">还没有添加任何任务</span>
            <ul v-show="list.length">
                <li v-for="item in filterData">
                    <div class="view">
                        <input type="checkbox" v-model="item.isComplete" />
                        <label @dblclick="edtorTodo(item)">{{item.title}}</label>
                        <button @click="delFn(item)">删除</button>
                    </div>
                    <input type="text" v-focus="edtorTodos===item" v-model="item.title"
                        @blur="edtoEnd(item)" @keyup.enter="edtoEnd(item)" @keyup.esc="cancelEdit(item)" />
                </li>
            </ul>
        </div>
    </div>
    <script>
        //存取localStorage中的数据
        var store = {
            save(key, value) {
                window.localStorage.setItem(key, JSON.stringify(value));
            },
            fetch(key) {
                return JSON.parse(window.localStorage.getItem(key)) || [];
            }
        }
        //list取出所有的值
        var list = store.fetch("storeData");
        var vm = new Vue({
            el: ".main",
            data: {
                list,
                todo: '',
                edtorTodos: '', //记录正在编辑的数据,
                beforeTitle: "", //记录正在编辑的数据的title
                visibility: "all" //通过这个属性值的变化对数据进行筛选
            },
            watch: {
                //下面的这种方法是浅监控
                /*list:function(){//监控list这个属性，当这个属性对应的值发生变化就会执行函数
                    store.save("storeData",this.list);
                }*/
                //下面的是深度监控
                list: {
                    handler: function () {
                        store.save("storeData", this.list);
                    },
                    deep: true
                }
            },
            methods: {
                enterFn(ev) { //添加任务
                    //向list中添加一项任务
                    //事件处理函数中的this指向的是当前这个根实例
                    if (this.todo == "") {
                        alert("数据为空不可添加");
                        return;
                    }
                    this.list.push({
                        title: this.todo,
                        isComplete: false
                    });
                    this.todo = "";
                },
                delFn(item) { //删除任务
                    var index = this.list.indexOf(item);
                    this.list.splice(index, 1)
                },
                edtorTodo(item) { //编辑任务
                    //编辑任务的时候记录编辑之前的值
                    this.beforeTitle = item.title;
                    this.edtorTodos = item;
                },
                edtoEnd(item) { //编辑完成
                    this.edtorTodos = "";
                    // this.cancelEdit = this.edtorTodos;
                },
                cancelEdit(item) { //取消编辑
                    item.title = this.beforeTitle;
                    this.beforeTitle = '';
                    this.edtorTodos = '';
                }
            },
            directives: {
                "focus": {
                    update(el, binding) {
                        if (binding.value) {
                            el.focus();
                        }
                    }
                }
            },
            computed: {
                unComplete() {
                    return this.list.filter(item => {
                        return !item.isComplete
                    }).length
                },
                filterData() {
                    //过滤的时候有三种情况 all completed unCompleted
                    var filter = {
                        all: function (list) {
                            return list;
                        },
                        completed: function (list) {
                            return list.filter(item => {
                                return item.isComplete;
                            })
                        },
                        unCompleted: function (list) {
                            return list.filter(item => {
                                return !item.isComplete;
                            })
                        }
                    }
                    //如果找到了过滤函数，就返回过滤后的数据，如果没有找到就返回所有的数据
                    return filter[this.visibility] ? filter[this.visibility](list) : list;
                }

            }
        });

        function hashFn() {
            var hash = window.location.hash.slice(1);
            vm.visibility = hash;
        }
        hashFn();
        window.addEventListener('hashchange', hashFn);
    </script>
</body>

</html>

在这里插入图片描述

2.简单版的todoList

代码如下（示例）：

<template>
  <div id="app">
    <!--添加文件框，设置双向绑定，并添加键盘监听事件（回车键：13）-->
    <input type="text" v-model="todo" @keydown="doAdd($event)" />
    <!--添加按钮，设置点击事件-->
    <button @click="doadd()">+增加</button>
    <br />
    <hr />
    <h2>进行中</h2>
    <ul>
      <!--将文本框的内容添加在列表里，逐条显示。并在每条数据前设置单选框，与变量checked进行双向绑定，每条数据后设置删除按钮-->
      <!--按删除键数据删除，当单选框为false时数据不显示-->
      <li v-for="(item, key) in list" v-if="!item.checked">
        <input type="checkbox" v-model="item.checked" />
        {{ item.title }}---<button @click="del(key)">删除</button>
      </li>
    </ul>
    <br />
    <h2>已完成</h2>
    <ul>
      <li v-for="(item, key) in list" v-if="item.checked">
        <input type="checkbox" v-model="item.checked" />
        {{ item.title }}---<button @click="del(key)">删除</button>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    /*业务逻辑里面定义的数据 */
    return {
      todo: "",
      list: [],
    };
  },
  methods: {
    doadd() {
      //获取文本款输入得值
      //把文本框的值push到list里
      this.list.push({
        title: this.todo,
        checked: false,
      });
      this.todo = "";
    },
    del(key) {
      //删除指定列
      this.list.splice(key, 1);
    },
    doAdd(e) {
      //键盘事件
      if (e.keyCode == 13) {
        this.list.push({
          title: this.todo,
          checked: false,
        });
        this.todo = "";
      }
    },
  },
};
</script>
<style land="scss">
</style>

在这里插入图片描述

总结

在这个复杂版例子中，我学到了：

之前没有学过本地存储，经过这个案例，把本地存储storage详细的学习了一遍，这个昨天写过博客了本地存储利用hash值过滤数据，这个知识以前接触的也不多，学了之后发现很好用哈获取hash值：window.location.hash.slice(1)（因为带"#“号，所以需要将”#"去掉，用到了slice方法）和hash相关的事件:hashchange 其实只要把不会的几个知识点搞懂，利用vue很快就可以搞定这个案例了

~ 喜欢的小伙伴点个赞呗，评论区留下宝贵的意见-谢谢呐♥~

如果文章当中有问题，或者有什么好的意见，大家可以指出来，一起学习。

奥佳博客（王小政）

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue实现todoList

系列文章目录1、在输入框中输入内容后按enter键，即可把内容添加到下面的列表中（如果内容为空则不添加）2、动态计算有几个未完成的任务3、点击复选框，实现选中或不选中效果（即完成或未完成）4、鼠标移入列表，会出现一个删除按钮，点击删除按钮即可删除该列表5、双击列表中的内容，可对列表内容进行编辑编辑完成后，按enter键完成编辑，或者当输入框失去焦点的时候也是完成编辑如果想要取消修改，按esc键即可取消编辑6、单击上面的所有任务、未完成任务、已完成任务，三个按钮可以切换任务列表7、已经添加的
复制链接

扫一扫