Vue实现todolist完整版(增加，删除，筛选)

最新推荐文章于 2024-08-04 12:12:11 发布

原创最新推荐文章于 2024-08-04 12:12:11 发布 · 1.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

这篇博客详细介绍了如何使用Vue.js实现一个完整的todolist应用，包括添加、删除任务和筛选功能。通过查看HTML、CSS和JS代码，读者可以学习到Vue组件的创建和事件处理等核心概念。

1.html 代码（需要下载Bootstrap）

 <div id="app">
        <div class="container ">
            <h3 class="text-center">todolist</h3>
            <ul class="list-group box">
                <li class="list-group-item">
                    <div class="input-group">
                        <input type="text" class="form-control" v-model="val">
                        <span class="input-group-btn">
                            <button class="btn btn-default" @click="add">添加</button>
                        </span>
                        
                    </div>
                </li>
                
                <li class="list-group-item text-center">
                    <div class="btn-group">
                        <button class="btn btn-default " :class="{'sel':actived=='all'}" @click="actived='all'">全部</button>
                        <button class="btn btn-default"  :class="{'sel':actived=='no'}" @click="actived='no'">未完成</button>
                        <button class="btn btn-default"  :class="{'sel':actived=='yes'}" @click="actived='yes'">完成</button>
                    </div>
                </li>
                
                <li class="list-group-item ">
                    <ul class="list-group">
                        <li class="list-group-item list-item" v-for="(item,index) in showList" :key="item.id">
                            <span :class="{'select':item.finished}" @click="item.finished=!item.finished">{{item.title}}</span>
                            <button class="btn btn-default" @click="del(index)">删除</button>
                        </li>
                        <li class="list-group-item text-center else" v-show="showList.length==0">
                            暂无内容
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

2.css

<style>
        .box{
            width: 320px;
            margin: 0 auto;
        }
        .btn-default.sel{
            background-color: cornflowerblue;
        }
        .list-item{
            display: flex;
            justify-content: space-between;
        }
        .list-item span{
            display: flex;
            align-items: center;
        }

        .list-group{
            margin-bottom: 0;
        }
        .list-group-item.else{
            border:none
        }
        .select{
            text-decoration: line-through;
        }
    </style>

3.js代码

 <script>
        let vm=new Vue({
            el:"#app",
            data:{
                val:'',
                list:[],
                actived:'all',
                showList:[]
                
            },
           
            methods: {
                add(){
                    this.list.unshift({
                        id:new Date().getTime(),
                        title:this.val,
                        finished:false
                    });

                    this.val=""
                },

                del(index){
                    this.list.splice(index,1)
                }
            },
            watch:{
                actived(value){
                    console.log(value);
                    if(value=='all'){
                        this.showList=this.list
                    }else if(value=='no'){
                        this.showList=this.list.filter(item=>!item.finished)
                    }else{
                        this.showList=this.list.filter(item=>item.finished)
                    }
                },
                list:{
                    handler(value){
                        if(this.actived=='all'){
                            this.showList=value;
                        }else if(this.actived=='no'){
                            this.showList=this.list.filter(item=>!item.finished)
                        }else{
                            this.showList=this.list.filter(item=>item.finished)
                        }
                        
                    },
                    deep:true
                
                }
            }
        })
    </script>