vue实现的代办事项功能-html代码-BFW代码库

vue实现的代办事项功能

代码语言：html

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=vue&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            Vue.component('togglebutton', {
                props: ['label', 'name'],
                template: `<div class="togglebutton-wrapper" v-bind:class="isactive ? 'togglebutton-checked' : ''">
                <label v-bind:for="name">
                <span class="togglebutton-label">{{ label }}</span>
                <span class="tooglebutton-box"></span>
                </label>
                <input v-bind:id="name" type="checkbox" v-bind:name="name" v-model="isactive" v-on:change="onToogle">
                </div>`,
                model: {
                    prop: 'checked',
                    event: 'change'
                },
                data: function () {
                    return {
                        isactive: false
                    }
                },
                methods: {
                    onToogle: function () {
                        this.$emit('clicked', this.isactive)
                    }
                }
            });

            var todolist = new Vue({
                el: '.bfw',
                data: {
                    newitem: '',
                    sortByStatus: false,
                    todo: [{
                        id: 1, label: "学习 VueJs", done: true
                    },
                        {
                            id: 2, label: "跑步 10 公里", done: false
                        },
                        {
                            id: 3, label: "访问bfw.wiki", done: false
                        }]
                },
                methods: {
                    addItem: function () {
                        this.todo.push({
                            id: Math.floor(Math.random() * 9999) + 10, label: this.newitem, done: false
                        });
                        this.newitem = '';
                    },
                    markAsDoneOrUndone: function (item) {
                        item.done = !item.done;
                    },
                    deleteItemFromList: function (item) {
                        let index = this.todo.indexOf(item)
                        this.todo.splice(index, 1);
                    },
                    clickontoogle: function (active) {
                        this.sortByStatus = active;
                    }
                },
                computed: {
                    todoByStatus: function () {

                        if (!this.sortByStatus) {
                            return this.todo;
                        }

                        var sortedArray = []
                        var doneArray = this.todo.filter(function (item) {
                            return item.done;
                        });
                        var notDoneArray = this.todo.filter(function (item) {
                            return !item.done;
                        });

                        sortedArray = [...notDoneArray,
                            ...doneArray];
                        return sortedArray;
                    }
                }
            });
        });
    </script>
    <style>
    
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            outline: none;
        }

        html,
        body {
            background: #f7f1f1;
            font-size: 1.1rem;
            font-family: 'Quicksand', sans-serif;
            height: 100%;
        }

@keyframes strikeitem {
            to {
                width: calc(100% + 1rem);
            }
        }

        .bfw {
            margin: 4rem auto;
            padding: 2rem 3rem 3rem;
            max-width: 500px;
            background: #FF6666;
            color: #FFF;
            box-shadow: -20px -20px 0px 0px rgba(100, 100, 100, .1);
        }

        #todolist h1 {
            font-weight: normal;
            font-size: 2.6rem;
            letter-spacing: 0.05em;
            border-bottom: 1px solid rgba(255, 255, 255, .3);
        }

        #todolist h1 span {
            display: block;
            font-size: 0.8rem;
            margin-bottom: 0.7rem;
            margin-left: 3px;
            margin-top: 0.2rem;
        }

        #todolist .emptylist {
            margin-top: 2.6rem;
            text-align: center;
            letter-spacing: .05em;
            font-style: italic;
            opacity: 0.8;

        }

        #todolist ul {
            margin-top: 2.6rem;
            list-style: none;
        }

        #todolist .todolist-move {
            transition: transform 1s;
        }

        #todolist li {
            display: flex;
            margin: 0 -3rem 4px;
            padding: 1.1rem 3rem;
            justify-content: space-between;
            align-items: center;
            background: rgba(255, 255, 255, 0.1);
        }

        #todolist .actions {
            flex-shrink: 0;
            padding-left: 0.7em;
        }

        #todolist .labe.........完整代码请登录后点击上方下载按钮下载查看