vue2调取后端接口实现多条件筛选

要实现多条件筛选，可以通过以下步骤来调取后端接口：

1. 在Vue组件中定义一个data对象，用于存储筛选条件的值。

data() {
  return {
    filters: {
      name: '',
      age: '',
      gender: ''
    },
    result: []
  }
},

2. 定义一个方法，用于调用后端接口并传递筛选条件。

methods: {
  search() {
    axios.get('/api/data', {
      params: this.filters
    }).then(response => {
      this.result = response.data;
    }).catch(error => {
      console.log(error);
    });
  }
}

3. 在模板中定义筛选条件的输入框，并绑定到data对象中的属性。

<div>
  <input type="text" v-model="filters.name" placeholder="Name">
  <input type="text" v-model="filters.age" placeholder="Age">
  <select v-model="filters.gender">
    <option value="">All</option>
    <option value="male">Male</option>
    <option value="female">Female</option>
  </select>
  <button @click="search">Search</button>
</div>

4. 在接口中使用筛选条件进行数据查询，并将查询结果返回给前端。

router.get('/data', (req, res) => {
  const filters = req.query;
  const result = data.filter(item => {
    if (filters.name && item.name.indexOf(filters.name) === -1) {
      return false;
    }
    if (filters.age && item.age !== filters.age) {
      return false;
    }
    if (filters.gender && item.gender !== filters.gender) {
      return false;
    }
    return true;
  });
  res.json(result);
});

通过以上步骤，就可以实现在Vue中调用后端接口进行多条件筛选的功能了。