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

在 Vue2 中调用后端接口实现多条件筛选，一般需要以下步骤：

1. 创建一个表单，用于输入筛选条件；

2. 绑定表单的值到 Vue 实例的数据中；

3. 在 Vue 实例中定义一个方法，用于调用后端接口，并将筛选条件作为参数传递给后端接口；

4. 在页面中使用 v-on 指令将表单的提交事件绑定到定义的方法上，当表单提交时，调用方法并传递筛选条件；

5. 在方法中使用 axios 或其他 HTTP 请求库，向后端发送请求并获取数据；

6. 将后端返回的数据绑定到页面中的列表或其他组件中，实现多条件筛选的功能。

下面是一个示例代码，用于演示如何实现多条件筛选：

<template>
  <div>
    <form v-on:submit.prevent="search">
      <input type="text" v-model="keyword" placeholder="关键字">
      <select v-model="category">
        <option value="">全部分类</option>
        <option value="1">分类1</option>
        <option value="2">分类2</option>
        <option value="3">分类3</option>
      </select>
      <button type="submit">搜索</button>
    </form>

    <ul>
      <li v-for="item in items">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      keyword: '',
      category: '',
      items: []
    };
  },
  methods: {
    search() {
      axios.get('/api/items', {
        params: {
          keyword: this.keyword,
          category: this.category
        }
      }).then(response => {
        this.items = response.data.items;
      }).catch(error => {
        console.error(error);
      });
    }
  }
};
</script>

在上面的代码中，我们定义了一个表单，包含一个文本框和一个下拉框，用于输入筛选条件。然后在 Vue 实例中定义了一个 `search` 方法，该方法使用 axios 库向后端发送请求，并将筛选条件作为参数传递给后端接口。最后将后端返回的数据绑定到页面中的列表中，实现了多条件筛选的功能。