组件部分
<template>
<div class="todo-contain">
<h1>TODOS</h1>
<div class="todolist-contain">
<header>
<nav>
<a v-for="(item,index) in tabListMap" :key="index" :class="currentTabKey==index ? 'active':''" @click="changeTab(index)">
{
{item}}
</a>
</nav>
<div class="todo-add">
<input type="text" ref="addInput" v-model="addTodoText" placeholder="请输入待办事项" />
<button @click="handleAddTodo()">添加</button>
</div>
<span class="todo-count">{
{totalTodoCount}}个待办</span>
</header>
<div class="todo-list">
<ul>
<li v-for="(item ,index) in filterTodoList" :key="index" :class=" (item.checked && currentTabKey!='done') ?'done':''">
<label>
<template v-if="item.status!='done' && currentTabKey!='done'">
<input type="checkbox" :value="item.id" v-model="item.checked" />
</template>
{
{item.title}}
</label>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'TodoList2',
props: {
todoListData: {
default: []
}
},
data() {
return {
todoListData_: {},
tabListMap: {
all: '全部',