• 章节:38
  • 访问:575
  • 时长:00:07:59
  • 日期:2019-07-04 02:29

现在我们增加这样的一个功能。

当我们勾选一个勾选框的时候。把所有已经完成的任务隐藏掉。

clipboard.png

首先修改app.vue文件如下

<template>
<div id="app">
<h4 class="bg-primary text-white text-center p-2">
{{name}}'s To Do List
</h4>
<div class="container-fluid p-4">
<div class="row">
<div class="col font-weight-bold">Task</div>
<div class="col-2 font-weight-bold">Done</div>
</div>
<div class="row" v-for="t in filteredTasks" v-bind:key="t.action">
<div class="col">{{t.action}}</div>
<div class="col-2 text-center">
<input type="checkbox" v-model="t.done" class="form-check-input" />
</div>
</div>
<div class="row bg-secondary py-2 mt-2 text-white">
<div class="col text-center">
<input type="checkbox" v-model="hideCompleted" class="form-check-input" />
<label class="form-check-label font-weight-bold">
Hide completed tasks
</label>
</div>
</div>
</div>
</div>
</template>

主要的操作就是 增加一个单选框 这个当显卡绑定的对象是hideCompleted

它是一个布尔类型的值。然后上面的for循环遍历的是filteredTasks

它是一个函数来的

<script>
export default {
name: 'app',
data() {
return {
name: "Adam",
tasks: [{ action: "Buy Flowers", done: false },
{ action: "Get Shoes", done: false },
{ action: "Collect Tickets", done: true },
{ action: "Call Joe", done: false }],
hideCompleted: true
}
},
computed: {
filteredTasks() {
return this.hideCompleted ?
this.tasks.filter(t => !t.done) : this.tasks
}
}
}
</script>

这个函数 如果hideCompleted未true 则只返回 done为false的任务。