vue——制作简易版to do list

最新推荐文章于 2024-04-26 17:54:13 发布

summer·

最新推荐文章于 2024-04-26 17:54:13 发布

阅读量493

点赞数 2

分类专栏： vue 文章标签： vue vue.js javascript 前端 html

本文链接：https://blog.csdn.net/weixin_45774485/article/details/117084970

版权

vue 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

To do list

自己每天都在用to do list，但是总感觉所有的to do list软件都没有我想象的那么好用，于是突发奇想，想自己做一个全栈的 To do list出来
预计使用node.js 、MongoDB 、vue 、H5相关技术，预计开发工具为hbuilderx

下面是demo的效果图（自我感觉很丑）和相关代码：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>to do list</title>
    <style>
        ……（css代码相信应该都会写）
    </style>
</head>

<body>
    <div id="app">
        <div class="wrapper">
            <p>
                <div class="add">
                    <input type="text" v-model="msg">
                    <span class="addBtn" @click="handleAdd(msg)" v-if="msg !== ''">添加待办</span>
                    <!-- 这里是如果没有输入内容，则禁止创建待办 -->
                    <span class="noaddBtn" v-else>添加待办</span>
                </div>
            </p>
            <div class="incomplete">
                <div>
                    待完成：
                </div>
                <wy-todolist>
                    <li v-for="item,index in incomplete">
                        <span class="del" @click="del(item,index)">删除</span><span class="content"><input type="checkbox" :checked="item.flag" @click="toggle(item,index)">{{item.msg}}</span></li>
                </wy-todolist>
            </div>
            <div class="complete">
                <div>已完成：</div>
                <ul>
                    <wy-donelist>
                        <li v-for="item,index in complete">
                            <span class="content"><input type="checkbox" :checked="item.flag" @click="toggleCancel(item,index)"> {{item.msg}}</span>
                        </li>
                    </wy-donelist>
                </ul>

            </div>
        </div>

    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        Vue.component('wy-todolist', {
        //最开始写template的时候写的是<li><slot></slot></li>，在上面又循环生成li,把自己气哭了
            template: `<ul>
                            <slot></slot>//加上插槽，组件内部才可以写html、文字等相关内容
                        </ul>`,
            data: function() {
                return {}
            },
            methods: {

            }
        });
        Vue.component('wy-donelist', {
            template: `<ul>
                            <slot></slot>
                        </ul>`,
            data: function() {//注意这里的data是函数哈，不然会报错
                return {

                }
            },
        });
        var app = new Vue({
            el: '#app',
            data: function() {
                return {
                    flag: false,
                    msg: '',
                    //未完成列表
                    incomplete: [],
                    //未完成列表的大小
                    inCount: 0,
                    //完成列表
                    complete: [],
                    //完成列表大小
                    comCount: 0
                }
            },
            methods: {
                handleAdd: function(obj) {
                    this.inCount++;
                    let temp = {};
                    temp.msg = obj;
                    temp.flag = this.flag;
                    this.incomplete.unshift(temp);
                    this.msg = '';
                    console.log(this.incomplete);
                },
                toggle: function(obj, index) {
                    //切换是否选中
                    obj.flag = !obj.flag;
                    //在待办数组中移除
                    let temp = this.incomplete.splice(index, 1);//得到的temp是数组
                    //传递数据和状态
                    this.complete.unshift(...temp);//使用拓展运算符，将数组中的对象转换出来
                },
                toggleCancel: function(obj, index) {
                    //切换是否选中
                    obj.flag = !obj.flag;
                    //在待办数组中移除
                    let temp = this.complete.splice(index, 1);
                    //传递数据和状态
                    this.incomplete.unshift(...temp);
                },
                del: function(obj, index) {
                    this.incomplete.splice(index, 1);
                }
            }
        })
    </script>
</body>

</html>