简单计数器的实现

最新推荐文章于 2021-08-14 16:18:54 发布

刘娅�

最新推荐文章于 2021-08-14 16:18:54 发布

阅读量688

点赞数

CC 4.0 BY-SA版权

文章标签： Vue.js

本文链接：https://blog.youkuaiyun.com/weixin_45044049/article/details/103273370

本文介绍了一个使用Vue.js构建的云备忘录应用，该应用具备添加、删除、标记任务为已完成或未完成的功能，并支持全选、筛选显示已完成或未完成任务以及清空已完成任务。通过简洁的HTML、CSS和Vue.js脚本实现了直观的用户界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ToDoList</title>
    <script src="./vue.js"></script>
    <style>
        body{
            background-color: #cccccc;
        }
        h1{
            font-size: 88px;
            font-weight: normal;
            color: rgb(236, 239, 241);
            width: 500px;
            height: 100px;
            margin: 0 auto;
            text-align: center
        }
        #box{
            width: 500px;
            height: 500px;
            background-color: bisque;
            margin: 20px auto;
            position: relative;
            overflow: hidden;
        }
        #box div{
            width: 500px;
            height: 40px;
            position: absolute;
            bottom: 0;
            text-align: center
        }
        #box .allElection{
            height: 15px;
            width: 15px;
            margin: 10px
        }
        #box .add{
            width: 416px;
            height: 40px;
            background-color: bisque;
            outline: none;
            border: none;
            border-bottom: 1px solid #cccccc
        }
        #box ul li{
            list-style: none;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #cccccc;
            width: 440px;
            padding-left: 0;
            font-size: 20px;
        }
        .delete{
            float: right;
            padding-right: 10px;
            width: 20px;
            height: 20px;
            cursor: pointer;
        }
        .change{
            text-decoration: line-through;
            color: #cccccc
        }
    </style>
</head>
<body>
    <h1>云备忘录</h1>
    <div id="box">
        <input type="checkbox" class="allElection" v-model="allElection">
        <input type="text" placeholder="接下来要做什么？" class="add" v-on:keyup.enter="add" v-model="str">
        <ul>
            <!-- <li v-for="item in finishedStats" v-bind:key="item.id" v-bind:style="{'text-decoration':item.flag?'line-through':'none'}"> -->
                <li v-for="(item,index) in finishedStats" v-bind:key="item.id" v-bind:class="{'change':item.flag}">
                <input type="checkbox" v-model="item.flag">
                {{item.text}}
                <span class="delete" @click="deleteOne(index)">×</span>
            </li>
        </ul>
        
        <div>
            <span>{{unfinished}}项未完成</span>
            <button v-on:click="sel('all')">全部</button>
            <button v-on:click="sel('unfinished')">未完成</button>
            <button v-on:click="sel('finished')">已完成</button>
            <button @click="clearFinished">清空已完成</button>
            <button @click="clearAll">清除所有</button>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el:"#box",
            computed:{
                // 计算有几项未完成
                unfinished(){
                    return this.list.filter((item)=>{
                        return item.flag === false
                    }).length
                },

                //下面的点击全部和完成及未完成
                finishedStats(){
                    return this.list.filter((item) => {
                        if(this.stats === "all"){
                            return true
                        }else if(this.stats === "unfinished"){
                            return !item.flag
                        }else if(this.stats === "finished"){
                            return item.flag
                        }
                    })
                },
                //全选
                allElection:{
                    set(v){
                        this.list.forEach(item => item.flag=v);
                    },
                    get(){
                        return this.list.every(item => item.flag)
                    }
                }
            },
            data:{
                list:[
                    {id:1, text:"yiyiyi", flag:true},
                    {id:2, text:"ererer", flag:false},
                    {id:3, text:"sansan", flag:true}
                ],
                str:"",
                stats: "all"
            },
            methods:{
                //添加接下来要做什么事
                add(){
                    this.list.unshift({
                        id: Date.now(),
                        text: this.str,
                        flag:false
                    })
                    this.str=""
                },
                //下面的点击全部和完成及未完成
                sel(stats){
                    this.stats = stats
                },
                //删除一行
                deleteOne(index){
                    this.list.splice(index, 1)
                },
                //清除已完成
                clearFinished(){
                    for(var i = 0; i < this.list.length; i++){
                        if(this.list[i].flag === true){
                            this.list.splice(i,1)
                            i--
                        }
                    }
                },
                //清除所有
                clearAll(){
                    this.list = []
                }
            }
        })
    </script>
</body>
</html>