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;
                    }
                }
            });
        });
.........完整代码请登录后点击上方下载按钮下载查看