Vue 实现任务列表

最新推荐文章于 2024-03-05 16:40:20 发布

hatuss

最新推荐文章于 2024-03-05 16:40:20 发布

阅读量2.7k

点赞数

分类专栏：腾讯课堂IMWeb 文章标签：腾讯课堂IMWeb html

本文链接：https://blog.csdn.net/hatuss/article/details/70253005

版权

腾讯课堂IMWeb 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

直接上代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue实现任务列表</title>
    <link rel="stylesheet" href="./homework01.css">
    <script type='text/javascript' src='./vue.js'></script>
</head>
<body>
    <div id="app">
        <div class="task-nav">
            任务计划列表
        </div>
        <div class="task-add">
            <h2>添加任务：</h2>
            <input
                    type="text"
                    placeholder="例如：吃饭睡觉打豆豆；  提示：+回车即可添加任务"
                    v-model="title"
                    v-on:keyup.enter="addTask"
            >
            <div class="task-state clearfix">
                <div class="task-state-left">{{unFinishedTask}}个任务未完成</div>
                <ul class="task-state-right">
                    <li
                            v-on:click="changePage('all')"
                            v-bind:class="{ selected: page=='all' }"
                    >所有任务</li>
                    <li
                            v-on:click="changePage('unfinished')"
                            v-bind:class="{ selected: page=='unfinished' }"
                    >未完成的任务</li>
                    <li
                            v-on:click="changePage('finished')"
                            v-bind:class="{ selected: page=='finished' }"
                    >完成的任务</li>
                </ul>
            </div>
        </div>
        <div
                class="task-list"
        >
            <h3>任务列表：</h3>
            <p
                    class="task-list-none"
                    v-show="!tasks.length"
            >还没添加任何任务</p>
            <ul
                    class="task-list-have"
                    v-show="!!tasks.length"
            >
                <li
                        v-for="task in tasks"
                        class="clearfix"
                        v-show="page=='all' || (page=='unfinished' && !task.state) || (page=='finished' && task.state)"
                >
                    <input
                            type="checkbox"
                            v-model="task.state"
                            v-on:click="checkUnfinishedTask"
                    >
                    <input
                            type="text"
                            v-model="task.title"
                            v-on:dblclick="editTask(task)"
                            v-on:blur="finishEditTask(task)"
                            v-on:keyup.enter="finishEditTask(task)"
                            v-on:keyup.esc="loseEditTask(task)"
                            v-bind:readonly="!task.edit"
                            v-bind:class="{ selected: task.state }"
                    >
                    <div
                            class="del-button"
                            v-on:click="delTask(task)"
                    ></div>
                </li>
            </ul>
        </div>
    </div>
    <script>
        var data = {
            title: '',
            tasks: [],
            unFinishedTask: 0,
            page: 'all'
        }

        var app = new Vue({
            el: '#app',
            data: data,
            methods: {
                addTask: function () {
                    var task = {};
                    task.title = this.title;
                    task.extitle = task.title;
                    task.state = false;
                    task.edit = false;
                    this.tasks.push(task);
                    this.unFinishedTask += 1;
                    this.title = undefined;
                },
                delTask: function (task) {
                    if(!task.state) {
                        this.unFinishedTask -= 1;
                    }
                    var index = this.tasks.indexOf(task);
                    this.tasks.splice(index,1);
                },
                editTask: function (task) {
                    task.edit = true;
                },
                finishEditTask:function (task) {
                    task.extitle = task.title;
                    task.edit = false;
                },
                loseEditTask: function (task) {
                    task.title = task.extitle;
                    task.edit = false;
                },
                checkUnfinishedTask: function () {
                    unfinishedTaskArray = [];
                    this.tasks.forEach(
                            function (item, index) {
                                if(!item.state) {
                                    unfinishedTaskArray.push(item);
                                }
                            }
                    );
                    this.unFinishedTask = unfinishedTaskArray.length;
                },
                changePage: function (type) {
                    this.page = type;
                }
            }
        })
    </script>
</body>
</html>

css

html, body {
    width: 100%;
    margin: 0;
    padding: 0;
}

.task-nav {
    width: 100%;
    height: 36px;
    padding: 0 25%;
    box-sizing: border-box;
    background-color: #FF6600;
    text-align: left;
    font-size: 20px;
    line-height: 36px;
    color: #FFF;
}
.task-add {
    width: 50%;
    margin: 0 auto;
}
.task-add h2 {
    height: 42px;
    margin: 0;
    padding: 0;
    font-size: 22px;
    line-height: 42px;
}
.task-add input {
    width: 100%;
    height: 20px;
    margin: 0;
    padding: 10px 0;
}
.task-add .task-state {
    width: 100%;
    height: 50px;
    text-align: right;
    font-size: 16px;
    line-height: 50px;
}
.task-add .task-state .task-state-left {
    float: left;
    width: 20%;
    text-align: center;
    color: #F05A10;
}
.task-add .task-state .task-state-right {
    display: inline-block;
    width: 70%;
    height: 50px;
    margin: 0;
    padding: 10px 0;
    box-sizing: border-box;
    list-style: none;
    line-height: 30px;
}
.task-add .task-state .task-state-right li {
    display: inline-block;
    width: 30%;
    height: 30px;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
}
.task-add .task-state .task-state-right li:hover {
    border: 1px solid #999;
    line-height: 28px;
}
.task-add .task-state .task-state-right li.selected {
    border: 1px solid #999;
    line-height: 28px;
}
.task-list {
    width: 50%;
    margin: 0 auto;
}
.task-list h3 {
    height: 42px;
    margin: 0;
    padding: 0;
    font-size: 22px;
    line-height: 42px;
}

.task-list .task-list-none {
    margin: 0;
    padding: 10px 0;
    font-size: 14px;
    text-indent: 1em;
    color: #666;
}
.task-list .task-list-have {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border-top: 1px solid #999;
    list-style: none;
}
.task-list .task-list-have li {
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 5px 0;
    border-bottom: 1px solid #999;
    box-sizing: border-box;
}
.task-list .task-list-have li input[type="checkbox"] {
    float: left;
    width: 8%;
    height: 20px;
    margin: 0;
    padding: 0;
    zoom: 200%;
}
.task-list .task-list-have li input[type="text"] {
    float: left;
    width: 80%;
    height: 40px;
    margin: 0;
    padding: 0;
    border: none;
    font-size: 20px;

}
.task-list .task-list-have li .selected {
    text-decoration: line-through;
}
.task-list .task-list-have li .del-button{
    float: right;
    width: 6%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    background: #FFF;
}
.task-list .task-list-have li .del-button:hover {
    background: url(./del.jpeg) no-repeat 50% 50%/ 80% 80%;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

任务可编辑，可添加，怎么搞都可以，就这么任性。

用什么label啊，一个input标签切换可读属性就能代替。

directive也不需要，自带的即可满足需求。