Vue 实现任务列表

来源：互联网发布：值乎不见了编辑：程序博客网时间：2024/06/05 02:18

直接上代码

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也不需要，自带的即可满足需求。

0 0

Vue 实现 任务列表

Vue 实现任务列表