二、子组件list的编写

子组件是显示todolist

先来看一下我们通过props传入三个值

    props: {
        things1:{
        },
        whichshow:{},
        defaultshow:{}
    },

things1：从父组件中传入的一个对象数组，也就是包含了每一个todo的值

里面的每一个对象包含三个值：

                value:val,
                isChecked:false,
                isEditing:false

whichshow：为后面的显示全部，显示已完成，显示未完成的按钮设立的值

defaultshow：为后面的显示全部，显示已完成，显示未完成的按钮设立的值

关于prop,我后面写一篇父组件给子组件传值以及子组件向父组件传值的文章来学习一下

那么要显示列表，我们就要通过ul，li以及v-for来实现

<template>
    <div>
    <ul >
        <li class="content_todoList" 
        v-for="(list,index) in things1" :key="list.value" 
        v-show="defaultshow || (whichshow?list.isChecked:!list.isChecked)">


             {{list.value}}

        </li>
    </ul>
    </div>
</template>

先不看li里面的内容，

v-for应该可以理解，就是在things1中循环输出取出list和index

:key是用来绑定v-for依赖的值，不写会报错

然后显示的内容就是{{list.value}}，也就是things1中每一个对象list中的value的值

取出index是因为后面删除todo功能需要

------------------------------------

然后v-show的内容就是显示的条件

defaultshow：一开始为true，也就是显示全部

（whichshow?list.isChecked:!list.isChecked）：当defaultshow为false时判断这个条件，也就是按条件显示whichshow就是显示哪一个，如果为true，显示list中isChecked为true的，也就是显示已完成的，如果为false，显示list中isChecked为false的，也就是显示未完成的

即：显示所有All：defaultshow：true

显示未完成Active: defaultshow:false; whichshow:false

显示已完成Completed: defaultshow:false; whichshow:true

---------------------------------------------------------------------------------------------------------------

然后list里面的内容分为四个部分

第一部分为点击checkbox则事件完成：

<input  class="checkBox" type="checkbox" v-model="list.isChecked">

v-model绑定了isChecked的数据，也就是如果list的isChecked改变，那么todo名字会加横线且变为灰色

第二部分为显示todo

<div class="content_todoList_main" @dblclick="toEdit(list)" :class="{deleted:list.isChecked}"
             v-show="!list.isEditing">
             {{list.value}}
            </div>

:class="{deleted:list.isChecked}"就是和之前的checkbox相连的，isChecked改变，那么调用deleted这个名字的CSS

    .deleted {
        text-decoration-line: line-through;
        color: grey;
    }

@dblclick是双击鼠标，绑定了一个toEdit方法

v-show：如果list对象的isEditing为false则不显示

也就是通过dblclick双击改变了isEditing的值为false，然后使得这个DIV不显示

        toEdit(obj) {
            obj.isEditing=true
        },

第三部分为显示文本框

            <input type="text" class="content_todoList_main"
            v-model="list.value"
            v-show="list.isEditing"
            @blur="unEdit(list)">

v-model就是将list的value的值绑定，使双击变为input时显示value的值

v-show和第二部分类似，如果isEditing为true时候显示这个文本框

@blur即编辑完成后，调用unEdit方法，将isEditing的值改为false，那么就会重新显示为第二部分

        unEdit(obj) {
            obj.isEditing=false
        }

第四部分为删除按钮

<span class="el-icon-close content_todoList_delete"  @click="deleteTodo(index)"></span>

el-icon-close就是element-ui的按钮

@click：单击则执行deleteTodo(index)方法，将这个todo删除

        deleteTodo(index) {
            this.things1.splice(index,1)
        },

完整代码：

<template>
    <div>
    <ul >
        <li class="content_todoList" 
        v-for="(list,index) in things1" :key="list.value" 
        v-show="defaultshow || (whichshow?list.isChecked:!list.isChecked)">

            <input  class="checkBox" type="checkbox" v-model="list.isChecked">
            
            <div class="content_todoList_main" @dblclick="toEdit(list)" :class="{deleted:list.isChecked}"
             v-show="!list.isEditing">
             {{list.value}}
            </div>

            <input type="text" class="content_todoList_main"
            v-model="list.value"
            v-show="list.isEditing"
            @blur="unEdit(list)">
            <span class="el-icon-close content_todoList_delete"  @click="deleteTodo(index)"></span>
        </li>
    </ul>
    </div>
</template>

<script>
export default {
    props: {
        things1:{
        },
        whichshow:{},
        defaultshow:{}
    },
    data() {
        return {
        }
    },
    methods: {
        deleteTodo(index) {
            this.things1.splice(index,1)
        },
        toEdit(obj) {
            obj.isEditing=true
        },
        unEdit(obj) {
            obj.isEditing=false
        }
    },
}
</script>

<style>
    .deleted {
        text-decoration-line: line-through;
        color: grey;
    }
    .content_todoList_delete {
        float: right;
        padding-right: 10px;
    }
    .el-icon-close:before {
        content: "\E60F";
        color: rgba(255, 0, 0, 0.904);
    }
    .content_todoList {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 1px solid gray;
        width: 440px;
        height: 40px;
        margin: 0 auto;  
        box-sizing: border-box;
    }
    .content_todoList_main {
        float: left;
        font-size: 20px;
        width: 350px;
        text-align: left;
    }
    .checkBox{
        float: left;
        width: 20px;
        height: 20px;
        margin-left: 10px;
    }
    ul {
        padding-left: 0px;
        margin: 0;
        display: flex;
        flex-direction: column;
    }
    a {
        border: 1px solid rgb(96, 126, 131);
        text-decoration:none; 
        border-radius: 5px;
        padding: 5px;
        margin-left: 4px;
    }
    .data {
        border: 1px solid gray;
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .data_times {
        padding-left: 10px;
    }
    .data_clearTodos{
        width:140px;
    }
</style>