vue给页面不同字段提供不同的搜索框

在 Vue 中，你可以使用计算属性来实现这种需求。首先，定义一个包含所有字段的数据数组，然后用计算属性来过滤出符合搜索条件的数据。

具体步骤如下：

1. 在 data 中定义一个包含所有字段的数据数组和一个表示当前搜索条件的数据对象：

data() {
  return {
    users: [
      { id: 1, name: '张三', age: 20, gender: '男' },
      { id: 2, name: '李四', age: 25, gender: '女' },
      { id: 3, name: '王五', age: 30, gender: '男' }
    ],
    search: { name: '', age: '', gender: '' }
  }
}

2. 在模板中定义多个搜索框，每个搜索框绑定到对应的搜索条件：

<div>
  <input v-model="search.name" placeholder="姓名">
  <input v-model="search.age" placeholder="年龄">
  <input v-model="search.gender" placeholder="性别">
</div>

3. 定义一个计算属性来过滤出符合搜索条件的数据，具体实现可以使用数组的 filter 方法：

computed: {
  filteredUsers() {
    return this.users.filter(user => {
      // 如果搜索条件为空，则返回 true，表示该字段不参与搜索
      if (!this.search.name && !this.search.age && !this.search.gender) {
        return true
      }
      // 检查当前用户是否符合搜索条件
      return (!this.search.name || user.name.includes(this.search.name))
        && (!this.search.age || user.age == this.search.age)
        && (!this.search.gender || user.gender == this.search.gender)
    })
  }
}

4. 在模板中使用计算属性的结果来渲染数据列表：

<div>
  <div v-for="user in filteredUsers" :key="user.id">
    <div>{{ user.name }}</div>
    <div>{{ user.age }}</div>
    <div>{{ user.gender }}</div>
  </div>
</div>

这样就可以根据不同的搜索条件对数据进行过滤了。