vue3使用v-for和v-if实现input输入框模糊查询，并且当输入框没有输入的值时不显示搜索内容

可以使用Vue3的计算属性来实现这个需求。首先，我们需要在data中定义一个数组来存储需要查询的数据，例如：

data() {
  return {
    items: [
      { id: 1, name: 'apple' },
      { id: 2, name: 'banana' },
      { id: 3, name: 'orange' },
      { id: 4, name: 'pear' }
    ],
    searchValue: ''
  }
}

然后，在模板中使用v-for和v-if来实现输入框模糊查询：

<input v-model="searchValue" placeholder="Search">

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

其中，v-model指令绑定了输入框的值，filteredItems是一个计算属性，用来过滤items数组中符合条件的数据：

computed: {
  filteredItems() {
    if (this.searchValue === '') {
      return []
    } else {
      return this.items.filter(item => item.name.toLowerCase().includes(this.searchValue.toLowerCase()))
    }
  }
}

这里使用了Array.filter()方法来过滤数据，如果输入框的值为空，则返回一个空数组，否则返回符合条件的数据。同时，使用toLowerCase()方法将输入框的值和数组中的数据都转为小写字母，以实现不区分大小写的模糊查询。