Vue2零基础写一个todolist（四）

接着我们要给任务列表添加点击删除的效果。

添加一个点击函数@click="checkboxChange(item)"，将数组里的对象item传入这个函数里。

<div class="list-item" v-for="(item,index) in missionList" :key="index" @click="checkboxChange(item)">
    <span class="list-check-box">
        <span class="list-check-show">√</span>
        </span>
    <span>
    {{item.title}}
    </span>
</div>

点击任务列表后令点击的那一条数据的check等于它的相反状态。

checkboxChange(item) {
    item.check = !item.check
}

接着根据check状态判断是否给点击对象添加额外的样式，比如这里我们点击前让圆里的√隐藏，文字去除删除线，点击后显示√，同时文字添加删除线。

动态绑定使用class的时候要在class前放一个冒号。

<span class="list-check-box">
    <span :class="item.check?'list-check-show':'list-check-hidden'">√</span>
</span>
<span :class="item.check?'list-check-decoration':''">
    {{item.title}}
</span>

这里用了三元运算符来判断item.check的状态，item.check?'list-check-show':'list-check-hidden'的意思是，当item.check为true的时候，使用list-check-show样式，为false的时候使用list-check-hidden样式。

等同于

<span class="list-check-box">
    <span v-if="item.check==true" class="list-check-show">√</span>
    <span v-else class="list-check-hide">√</span>
</span>

接着来做任务分类，首先是把任务分类改写为数组渲染的模式。

<div class="right">
    <div class="right-button">
        所有任务
    </div>
    <div class="right-button">
        未完成
     </div>
    <div class="right-button">
        已完成
    </div>
</div>

这部分改为

<div class="right">
    <div class="right-button" v-for="(item,index) in buttonList" :key='index' @click="tabClick(item,index)">
        <div :class="index===listShow?'right-button-border':''"> {{item.name}}</div>
    </div>
</div>

data里添加buttonList里装任务分类标题和序号，新增listShow作为判断是否给任务列表添加点击样式，增加finishedList和unfinishedList两个数组装任务分类。

data() {
    return {
    ....
    ....
        missionList: [],// 已有数组
        finishedList: [],
        unfinishedList: [],
        listShow: 0,
        buttonList: [{
                name: '所有任务',
                value: 0
            },
            {
                name: '未完成的任务',
                value: 1
            },
            {
                name: '已完成的任务',
                value: 2
            }
        ],
    ....
    ....
    }
}

添加任务分类的点击事件，把buttonList的对象和索引传入，用点击到的索引作为任务列表的显示判断。在switch循环里用filter筛选出任务分类的列表。

methods:{
.....
.....
    tabClick(item,index){
        this.listShow = index
        switch (item.value) {
          case 0:
            this.missionList = this.missionList
            break;
          case 1:
            this.unfinishedList = this.missionList.filter(item => item.check === false)
            break;
          case 2:
            this.finishedList = this.missionList.filter(item => item.check === true)
            break;
          default:
            break;
        }
    }
}

新增未完成和已完成的任务列表。

<div class="list-content">
    <div class="list-title">任务列表：</div>

    <div class="list-box" v-show="listShow===0">
        <div class="list-item" v-for="(item,index) in missionList" :key="index" @click="checkboxChange(item)">
            <span class="list-check-box">
                <span :class="item.check?'list-check-show':'list-check-hidden'">√</span>
            </span>
            <span :class="item.check?'list-check-decoration':''">
              {{item.title}}
            </span>
        </div>
    </div>
    
        <div class="list-box" v-show="listShow===1">
        <div class="list-item" v-for="(item,index) in unfinishedList" :key="index" @click="checkboxChange(item)">
            <span class="list-check-box">
                <span :class="item.check?'list-check-show':'list-check-hidden'">√</span>
            </span>
            <span :class="item.check?'list-check-decoration':''">
              {{item.title}}
            </span>
        </div>
    </div>
    
        <div class="list-box" v-show="listShow===2">
        <div class="list-item" v-for="(item,index) in finishedList" :key="index" @click="checkboxChange(item)">
            <span class="list-check-box">
                <span :class="item.check?'list-check-show':'list-check-hidden'">√</span>
            </span>
            <span :class="item.check?'list-check-decoration':''">
              {{item.title}}
            </span>
        </div>
    </div>

</div>

最后把这里改一下

<div class="left">
    {{missionList.length}}个任务未完成
</div>

missionList改为unfinishedList。

整个todolist列表就大概的完成了。