使用vue2的filter过滤列表

最新推荐文章于 2024-09-03 08:49:28 发布

At小小程序媛

最新推荐文章于 2024-09-03 08:49:28 发布

阅读量5.2k

点赞数

分类专栏：前端 vue

本文链接：https://blog.csdn.net/onlyjin/article/details/84108614

版权

本文介绍了在Vue2中如何创建并使用filter过滤列表数据，通过自定义filter实现对组件中数据的筛选和处理，提升用户体验。

摘要由CSDN通过智能技术生成

组件部分

<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: '全部',