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

要实现多条件筛选，可以使用Vue.js的Axios库来调取后端接口。以下是一个简单的例子：

首先，在Vue组件中定义一个data对象，用于存储筛选条件：

data() {
  return {
    filters: {
      keyword: '',
      category: '',
      date: ''
    },
    results: []   // 存储查询结果
  }
}

然后，定义一个方法，用于调取后端接口并执行查询：

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

在这个例子中，我们使用了Axios的get()方法来调用后端接口，同时将筛选条件作为查询参数传递给后端。在查询成功后，我们将查询结果存储在Vue组件的data对象中，并将其渲染到页面上。

最后，在Vue模板中添加一个表单，让用户输入筛选条件：

<form>
  <input v-model="filters.keyword" placeholder="关键字">
  <select v-model="filters.category">
    <option value="">所有分类</option>
    <option value="1">分类1</option>
    <option value="2">分类2</option>
    <option value="3">分类3</option>
  </select>
  <input v-model="filters.date" type="date">
  <button @click.prevent="search">搜索</button>
</form>

<ul>
  <li v-for="result in results">{{ result.title }}</li>
</ul>

在这个例子中，我们使用了Vue的双向数据绑定(v-model)来将用户输入的筛选条件与Vue组件的data对象进行绑定。当用户点击“搜索”按钮时，Vue会调用search()方法来执行查询，并将查询结果渲染到页面上。

这是一个简单的例子，你可以根据自己的需求进行修改和扩展。