【IMWeb训练营作业】用Vue做任务列表To do list

最新推荐文章于 2022-11-26 08:00:00 发布
原创最新推荐文章于 2022-11-26 08:00:00 发布 · 913 阅读
0 ·
CC 4.0 BY-SA版权
web相关专栏收录该内容
7 篇文章
订阅专栏
本文通过Vue.js实现了一个任务列表（To Do List）应用，涵盖了组件化、数据绑定和事件处理等核心特性。预览页面展示了应用的运行效果，包括添加、删除和状态切换等功能。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
预览页面：点击打开链接
效果图：
下面是代码
<!DOCTYPE html>
<html>
<head>
    <title>plan and task list</title>
    <meta charset="UTF-8"/>
    <script type="text/javascript" src="./FileSaver.min.js"></script>
    <script type="text/javascript" src="./vue.js"> </script>
</head>
<body>
<style type="text/css">
    .plan {
        width: 79%;
        float: left;
        background: #ccc;
    }

    .list {
        width: 20%;
        float: right;
        background: #ddd;
    }

    .plancontent {
        height: 800px;
    }

    .listcontent {
        height: 800px;
    }

    .must {
        height: 400px;
        background-color: #ff9900;
    }

    .option {
        background-color: #4dab4d;
        height: 400px;
    }

    .edit {
        width: 100%;
        height: 800px;
    }

    .footer {
        clear: both;
        padding-top: 20px;
    }

    h1 {
        margin: 0 0;
    }

    body {
        margin: 0 0;
    }

    .header {
        position: relative;
    }

    .userbar {
        position: absolute;
        right: 0;
        top: 0;
        height: 55px;
    }

    .userbar li {
        float: left;
        list-style: none;
        margin: 0px 5px 0px 5px;
        padding: auto;
        line-height: 55px;
    }

    a {
        color: #000;
    }

    .edit textarea {
        width: 100%;
        height: 373px;
        resize: none;
        padding: 0 0;
        border: 1px solid black;
        margin: 0 0;
        box-sizing: border-box;
    }

    h1, h2 {
        margin: 0;
    }

    #upload {
        opacity: 0;
        position: absolute;
        z-index: 10;
        left: 23px;
        height: 21px;
        top: 17px;
        width: 32px;
        font-size: 1px;
    }
    .finished{
        text-decoration:line-through;
    }
    .unfinished{
        text-decoration:none;
    }
</style>
<div class="header" style="height: 55px;">
    <img src="./grape.png" style="height: 100%;">
    <h1 style="display: inline;"><span
            style="vertical-align:top; padding:17px 0px 17px 0px;line-height: 55px">时间管理小应用</span>
    </h1>
    <div class="userbar">
        <ul style="margin: 0">
            <li><a href="#">导入</a><input type="file" id="upload" name="all" value="导入"/></li>
            <li><a href="#" id="exportToFile">导出</a></li>
            <li><a href="#">帮助</a></li>
        </ul>
    </div>
</div>
<div class="content">
    <div class="plan">
        <h1 align="center">计划</h1>
        <h2 align="center" style="color: #777777;font-size: 17px;">要做成一系列动作的集合，用以完成待办事项</h2>
        <div class="plancontent">
            <div class="must">
                <h2 align="center">必须做的计划</h2>
                <div class="edit">
                    <textarea id="mustDoPlan" placeholder="计划动作1 计划动作2" v-model="mustDoPlan"></textarea>
                </div>
            </div>

            <div class="option">
                <h2 align="center">可选做的计划</h2>
                <div class="edit">
                    <textarea id="optionDoPlan" placeholder="计划动作1 计划动作2" v-model="optionDoPlan"></textarea>
                </div>
            </div>
        </div>
    </div>
    <div class="list">
        <h1 align="center">任务列表</h1>
        <h2 align="center" style="color: #777777;font-size: 17px;">  </h2>
        <div class="listcontent">
            <div class="list-header">
                <input id="taskinput" type="text" placeholder="添加任务"
                      v-model="newItem" v-on:keyup.enter="addNewList" style="width: 100%;box-sizing: border-box;background: url(./si-glyph-baby.svg) no-repeat;padding: 5px 5px 5px 50px;border:none;font-size: 21px; autofocus">
            </div>
            <ul class="todo-list" style="padding: 0;">
                <li v-for="list in lists" style="list-style:none;" ><input type="checkbox" v-model="list.option" v-on:click="clickList(list)"><span v-bind:class="{finished:list.option,unfinished:!list.option}">{{list.text}}</span></li>
            </ul>
            <div class="todo-footer">
                <!--<input type="checkbox" id="checkall">-->
                <span>
				<span id="taskall" >{{totalNumber}}</span>
				<span> 待办事件 </span>
			</span>
                <button style="float: right;" id="del" v-on:click="delSelections">删除选中</button>
            </div>
        </div>
    </div>
</div>
<div class="footer">
    <div style="float: left;">
        <span align="right">凡事预则立不预则废</span>
    </div>
    <div style="float: right;">
        <span>反馈邮箱：55154717@qq.com</span>
    </div>
</div>

</body>
<script type="text/javascript">
// vue初始化代码
var app = new Vue({
    el:'.content',
    data:{
        mustDoPlan : '',
        optionDoPlan : '',
        lists : [],
        newItem:"",
        totalNumber:0
    },
    methods:{
        addNewList:function(){
            if(!this.newItem){ //如果为空，什么都不添加
                return false;
            }
            this.lists.push({
                text:this.newItem,
                option:false
            });
            this.totalNumber++;
            this.newItem="";
        },
        clickList:function(list){
            if(list.option)
            {
                this.totalNumber--;
            }
            else
            {
                this.totalNumber++;
            }
        },
        delSelections:function(){
            var i=0;
            newList =[];
            for (i=0;i<this.lists.length;i++)
            {
                if(this.lists[i].option===false)// 需要保留的记下来
                {
                    newList.push(this.lists[i]);
                }               
            }
            this.lists.splice(0,this.lists.length);//删除所有，重新加入
            for(i=0;i<newList.length;i++)
                this.lists.push(newList[i]);
            this.totalNumber=this.lists.length;
        }
        
    }//end of methods 
}//end of vue
)
    function restoreData(all)
    {
        window.app._data.mustDoPlan=all.mustDoPlan;
        window.app._data.optionDoPlan=all.optionDoPlan;
        window.app._data.newItem=all.newItem;
        window.app._data.totalNumber=all.totalNumber;
        (function()
        {
            var i=0;
            for(i=0;i<all.lists.length;i++)
                window.app._data.lists.push(all.lists[i]);
        })();//立即执行函数
    }
    //处理上传
    var inputElement = document.getElementById("upload");
    inputElement.addEventListener("change", handleFiles, false);
    function handleFiles() {
        if (this.files.length > 0) {//选中了文件才进行读取，否则不读
            var reader = new FileReader();
            reader.onload = function (f) {
                var all = JSON.parse(f.target.result);
                restoreData(all);
            };
            reader.readAsText(this.files[0]);
        }
    }
    //检测页面关闭事件
    window.onbeforeunload = function () {
        localStorage.data = JSON.stringify(window.app._data);
    };
    window.onload = function () {//加载已经保存的数据
        if ("undefined" !== typeof localStorage.data) {
            var all = JSON.parse(localStorage.data);
            restoreData(all);
        }
    };

    //导出按钮
    var exportToFile = document.getElementById("exportToFile");

    exportToFile.addEventListener("click", function () {
        var jsonAll = JSON.stringify(window.app._data);
        var blob = new Blob([jsonAll], {type: "text/plain;charset=utf-8"});
        saveAs(blob, "planAndTask.txt");
    }, false);
    
    var text = document.getElementById("taskinput");
    text.focus();
</script>
</html>