温馨提示×

vue如何实现列表筛选功能

vue
小亿
199
2023-08-03 23:06:46
栏目: 编程语言

在Vue中实现列表筛选功能有多种方法,以下是其中一种常见的做法:

1. 创建一个Vue组件,用于显示列表和处理筛选逻辑。

<template>

  <div>

    <input v-model="filterText" placeholder="输入关键字筛选">

    <ul>

      <li v-for="item in filteredList" :key="item.id">{{ item.name }}</li>

    </ul>

  </div>

</template>

<script>

export default {

  data() {

    return {

      filterText: '',

      list: [

        { id: 1, name: 'Item 1' },

        { id: 2, name: 'Item 2' },

        { id: 3, name: 'Item 3' },

      ],

    };

  },

  computed: {

    filteredList() {

      return this.list.filter(item => {

        return item.name.includes(this.filterText);

      });

    },

  },

};

</script>

在上面的示例中,我们使用了一个输入框(<input>)来获取用户的筛选关键字,并使用v-model指令将输入框的值绑定到filterText数据属性上。

在computed计算属性中,我们使用filter()方法来过滤列表项,只显示包含筛选关键字的项。

最后,在模板中使用v-for指令遍历filteredList,并通过:key绑定每个列表项的唯一标识符。

你可以根据需要自定义样式、添加更多筛选条件或使用其他方法来实现列表筛选功能。


0