二十一、todolist案例开发

todolist案例开发要实现的效果图如下：

 

todolist案例开发代码实现

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>todolist案例开发</title>
    <style>
        table{
            border: 1px solid black;
            text-align: center;
        }
        th{
            border: 1px solid black;
            background-color:royalblue;
            color: white;
            width: 200px;
        }
        td{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <div id='app'>
        <input type="text" v-model.trim='title'> <button type="button" @click='addItem()'>添加</button>
        <table>
            <thead>
                <tr>
                    <th><label><input type="checkbox" @click='checkedAllItems()' v-model='checkedAll' >全选</label></th>
                    <th>标题</th>
                    <th>管理</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in newItems" :key="index">
                    <td><input type="checkbox" @click='checkedItem(index)' v-model='item.checked'></td>
                    <td>{{item.title}}</td>
                    <td @click='deleteItem(index)'>删除</td>
                </tr>
                <tr>
                    <td colspan="3" align="left">
                        <button type="button" @click='deleteAll'>批量删除</button> 
                        <button type="button" @click='submitItems()'>提交</button> 
                    </td>
                </tr>
            </tbody>
        </table>
        <span>提交后的数据：{{itemsSubmit.length>0?itemsSubmit:""}}</span>
    </div>
    <script>
        let data={
            items:[],//对象数组
            itemObj:{},//临时数据的对象
            title:'',//临时数据的对象属性
            checkedAll:false,//全选项的复选框状态值
            itemsSubmit:[]//临时存储被提交的数据
        }
        new Vue({
            el:'#app',
            data(){
                return data;
            },
            methods:{
                addItem(){//1、添加数据
                    if(this.title!=""){
                        this.itemObj.title=this.title;
                        this.itemObj.checked=false;//默认复选框为false
                        this.items.push(this.itemObj);
                        //console.log(this.itemObj,this.items);
                        this.title="";
                        this.itemObj={};
                        this.isCheckedAll();
                    }
                },
                checkedItem(val){//3、当前操作的item的复选框
                    this.items[val].checked=!this.items[val].checked;
                    this.$set(this.items,val,this.items[val]);
                    //console.log(val);
                    //console.log(this.items[val].checked);
                    this.isCheckedAll();
                },
                isCheckedAll(){//4、根据所有的item判断是否要改变全选项的复选框状态
                    if(this.items.length>0){
                        this.checkedAll=true;
                        for(let i=0;i<this.items.length;i++)
                        {
                            if(!this.items[i].checked){
                                this.checkedAll=false;
                                break;
                            }
                        }
                    }else{
                        this.checkedAll=false;
                    }
                },
                checkedAllItems(){//5、当前操作的全选的复选框。根据全选项的复选框状态改变所有的item的复选框状态
                    this.checkedAll=!this.checkedAll;
                    if(this.items.length>0){
                        for(let i=0;i<this.items.length;i++)
                        {
                            this.items[i].checked=this.checkedAll;
                            this.$set(this.items,i,this.items[i]);
                        }
                    }           
                },
                deleteItem(val){//6、删除item
                  this.items.splice(val,1); 
                  this.isCheckedAll(); 
                },
                deleteAll(){//7、批量删除item
                    if(this.items.length>0){
                        for(let i=0;i<this.items.length;i++){
                            if(this.items[i].checked){
                                this.items.splice(i--,1);//注意在for循环中使用splice方法时候，必须i--。
                            }
                        }
                    }
                    this.isCheckedAll();
                },
                submitItems(){//8、提交数据
                    this.itemsSubmit=[];
                    if(this.items.length>0){
                        for(let i=0;i<this.items.length;i++){
                            if(this.items[i].checked){
                                this.itemsSubmit.push(this.items[i]);
                            }
                        }
                        this.itemsSubmit=JSON.stringify(this.itemsSubmit);
                    }
                    
                }
            },
            computed:{
                newItems(){//2、返回符合条件的新数组
                    if(this.items.length>0){
                        let newItems=[...this.items];
                        return newItems;
                    }
                }
            }
        });
    </script>
</body>
</html>

 

posted @ 2021-09-07 23:56  Strugglinggirl  阅读(65)  评论(0)  编辑  收藏  举报