• 章节:38
  • 访问:605
  • 时长:00:07:23
  • 日期:2019-07-04 11:28

我们通过判断filteredTasks的长度 当这个长度为0的时候。我们显示一个Nothing to do. Hurrah! 的提示。

<div class="row" v-if="filteredTasks.length == 0">
                <div class="col text-center">
                    <b>Nothing to do. Hurrah!</b>
                </div>
            </div>
            <template v-else>
                <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">
                        <input type="checkbox" v-model="t.done" class="form-check-input" />
                        {{t.done}}
                    </div>
                </div>
            </template>

clipboard.png