vue筛选

在Vue中，可以使用过滤器（Filters）或计算属性（Computed Properties）来实现筛选功能。下面分别介绍这两种方法的用法。

使用过滤器（Filters）

过滤器是Vue提供的一种简单的文本格式化工具，在模板中通过“管道”操作符|使用。可以将数据按照某种格式进行处理、转换或筛选。

首先，在Vue组件中声明一个过滤器函数，例如：

filters: {
  capitalize(value) {
    if (!value) return '';
    return value.charAt(0).toUpperCase() + value.slice(1);
  }
}

在上述例子中，我们定义了一个名为capitalize的过滤器函数，它将字符串的第一个字母转换为大写。

然后，在模板中使用过滤器，例如：

<template>
  <div>
    <p>{{ message | capitalize }}</p>
  </div>
</template>

在上述代码中，我们使用message数据，并通过过滤器capitalize对其进行处理，最后渲染到页面上。

可以通过使用多个过滤器，按顺序链式调用。例如：

<template>
  <div>
    <p>{{ message | capitalize | reverse }}</p>
  </div>
</template>

使用计算属性（Computed Properties）

计算属性是Vue提供的一种侦听属性变化并返回计算结果的方式。可以根据已有的数据进行逻辑计算或筛选，并将结果作为属性暴露给模板使用。

首先，在Vue组件中声明一个计算属性，例如：

computed: {
  filteredItems() {
    return this.items.filter((item) => item.price > 100);
  }
}

在上述例子中，我们定义了一个名为filteredItems的计算属性，它筛选出价格大于100的商品。

然后，在模板中使用计算属性，例如：

<template>
  <div>
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>