vue3 数据过滤方法

在Vue 3中,你可以使用多种方法来过滤数据。以下是几种常见的实现方式:

1. 使用计算属性(Computed Properties)

计算属性是Vue中用于声明式地描述如何根据其他响应式状态计算值的一种方式。你可以使用计算属性来过滤数组。

复制代码
<template>
  <div>
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>
 
<script setup>
import { ref, computed } from 'vue';
 
const items = ref([
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' }
]);
 
const searchQuery = ref('');
 
const filteredItems = computed(() => {
  return items.value.filter(item => item.name.toLowerCase().includes(searchQuery.value.toLowerCase()));
});
</script>

2. 使用方法(Methods)

你也可以在组件的方法中实现过滤逻辑,然后返回过滤后的数组。

复制代码
<template>
  <div>
    <input v-model="searchQuery" placeholder="Search...">
    <ul>
      <li v-for="item in filterItems()" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
 
const items = ref([
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' }
]);
 
const searchQuery = ref('');
 
function filterItems() {
  return items.value.filter(item => item.name.toLowerCase().includes(searchQuery.value.toLowerCase()));
}
</script>

3. 使用侦听器(Watchers)和过滤器(Filters,注意:Vue 3中不推荐使用过滤器,但可以模拟)

虽然Vue 3不推荐使用过滤器,但你可以通过创建一个函数并使用它来模拟过滤器的行为。同时,你可以使用watch来观察某个数据的变化,并相应地更新过滤后的数据。

复制代码
<template>
  <div>
    <input v-model="searchQuery" placeholder="Search...">
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>
 
<script setup>
import { ref, watch } from 'vue';
 
const items = ref([
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' }
]);
const searchQuery = ref('');
const filteredItems = ref([]);
 
watch(searchQuery, (newQuery) => {
  filteredItems.value = items.value.filter(item => item.name.toLowerCase().includes(newQuery.toLowerCase()));
});
</script>

4. 使用第三方库(例如lodash)的filter函数(可选)

如果你喜欢使用lodash这样的库来处理数组,你可以这样做:

复制代码
import { ref } from 'vue';
import _ from 'lodash'; // 确保已经安装了lodash包
 
const items = ref([...]); // 同上定义的items数组
const searchQuery = ref(''); // 同上定义的搜索查询字符串ref对象
const filteredItems = ref([]); // 同上定义的过滤后items的ref对象,初始为空数组。这里不需要在setup中使用watch,因为可以直接使用_.filter。
 
filteredItems.value = _.filter(items.value, item => item.name.toLowerCase().includes(searchQuery.value.toLowerCase())); // 直接使用lodash的filter函数进行过滤。注意:这种方式通常在计算属性或侦听器中更常用,而不是直接赋值。这里只是为了演示如何使用lodash。更好的做法是在计算属性或侦听器中使用它。例如:`computed(() => _.filter(items.value, ...))`。但请注意,直接在模板或方法中使用这种方式可能会导致不必要的性能开销,因为它在每次组件渲染时都会执行。更好的做法是将过滤逻辑放在计算属性或侦听器中。例如:`computed(() => _.
相关推荐
泷羽Sec-静安27 分钟前
Less-1 GET-Error based-Single quotes-String GET-基于错误-单引号-字符串
前端·css·网络·sql·安全·web安全·less
小时前端38 分钟前
虚拟DOM已死?90%内存节省的Vapor模式正在颠覆前端
前端·html
Keepreal49639 分钟前
Web Components简介及如何使用
前端·javascript·html
进击的野人43 分钟前
JavaScript变量声明的前世今生:从var到let/const的演进
javascript
jump6801 小时前
TS中 unknown 和 any 的区别
前端
无羡仙1 小时前
AI终于‘看见’网页了!Stagewise让UI修改从‘盲调’变‘指哪打哪
前端
柯腾啊2 小时前
“Script error.”的产生原因和解决办法
前端·javascript·浏览器
沙漠之皇2 小时前
ts 定义重复对象字段
前端
HashTang2 小时前
不用再配服务器了!这套 Next.js + Cloudflare 模板,一个人搞定全栈出海
前端·后端·边缘计算
Cory.眼3 小时前
WebRTC入门指南:实时通信零基础
javascript·webrtc·实时通信