526互联

vue3 ts 写搜索联系人功能逻辑

发布时间 2023-04-27 13:33:17作者: yjxQWQ

vue3 ts 写搜索联系人功能

vue

<input type="text" v-model="search" placeholder="Search contacts">


<template v-for="(item, index) in filteredData" :key="index">

ts

  1. !search.value 表示如果 search.value 为空或者未定义，即条件成立；
  2. data.nick.toLowerCase().includes(search.value.toLowerCase()) 表示如果 data.nick 的小写形式包含 search.value 的小写形式，即条件成立。
 var search = ref("")
    // 搜索功能
    // 搜索功能
    const filterTableData = computed(() =>
      data.users!.filter(
        (data) =>
          !search.value ||
          data.nick.toLowerCase().includes(search.value.toLowerCase())
      )
    );