vue2根据不同条件，调用不同接口数据

在Vue2中，可以通过计算属性和方法来根据不同条件调用不同接口数据。

首先定义一个变量来存储当前条件：

data() {
  return {
    condition: 'A'
  }
}

然后定义计算属性来根据条件返回不同的数据：

computed: {
  data() {
    if (this.condition === 'A') {
      return this.getDataA()
    } else if (this.condition === 'B') {
      return this.getDataB()
    } else {
      return this.getDataC()
    }
  }
}

其中 `getDataA()`、`getDataB()` 和 `getDataC()` 是自定义的方法，用于获取不同的数据。

最后，在模板中使用计算属性返回的数据即可：

<div>{{ data }}</div>

当条件发生变化时，计算属性会自动重新计算并返回新的数据。同时也可以在方法中手动调用计算属性来获取数据：

methods: {
  fetchData() {
    const data = this.data
    // ...
  }
}

相关问题

vue2 mounted同时调用接口传不同的参数

在 Vue2 中，您可以在 `mounted` 钩子函数中调用接口，同时传递不同的参数。具体实现方法如下：

1. 在 `data` 中定义需要传递的参数数组 `params` ，比如：

   data() {
     return {
       params: [
         { paramA: 'valueA1', paramB: 'valueB1' },
         { paramA: 'valueA2', paramB: 'valueB2' }
       ],
       dataList: []
     }
   }

2. 在 `mounted` 中循环遍历参数数组，调用接口并传递不同的参数：

   mounted() {
     this.params.forEach(param => {
       const url = 'your-api-url'
       axios.get(url, { params: param })
         .then(response => {
           this.dataList.push(response.data)
         })
         .catch(error => {
           console.error(error)
         })
     })
   }

在上面的代码中，我们定义了一个参数数组 `params`，包含了需要传递的不同参数值。在 `mounted` 钩子函数中，我们遍历 `params` 数组，并使用 `axios` 发送 GET 请求，同时将当前遍历到的参数对象作为请求参数传递给后端。当后端返回数据时，我们将其保存在 `dataList` 数组中，以便在页面上展示。

需要注意的是，由于接口调用是异步的，因此返回的数据的顺序可能与参数数组中的顺序不一致。如果需要保证数据的顺序与参数数组一致，可以在发送请求时，将参数数组的索引作为参数一起传递给后端，后端返回时再将索引一起返回，前端在接收数据时根据索引进行排序。

vue 点击按钮 根据input调用接口模糊查询

Vue是一种流行的JavaScript框架，它可帮助开发人员快速构建用户界面。

在Vue中，我们可以使用v-model指令来绑定输入框的值到Vue实例的数据属性中。我们还可以使用methods选项来定义一个方法，该方法会在按钮点击时被触发。

要实现根据输入框的值调用接口进行模糊查询，我们可以按照以下步骤进行：

1. 在Vue实例中，创建一个data属性来存储输入框的值，例如searchKey。
2. 在输入框元素上使用v-model指令，将输入框的值与searchKey进行双向绑定。

   <input type="text" v-model="searchKey">

3. 在按钮元素上添加一个@click事件，用来触发查询方法。

   <button @click="query">查询</button>

4. 在Vue实例中，使用methods选项定义query方法，该方法将根据searchKey的值进行接口调用。

   methods: {
     query() {
       // 调用接口以进行模糊查询
       // 使用this.searchKey获取输入框的值
       // 进行接口调用，传入searchKey作为参数
     }
   }

在query方法中，你需要根据你的实际需求使用适当的方式调用接口。你可以使用Vue提供的Axios库或者其他的HTTP请求库来发送请求，并将searchKey作为参数传递给接口。

总之，以上就是使用Vue实现根据输入框值调用接口进行模糊查询的基本步骤。通过双向绑定和事件绑定，我们可以轻松地实现这一功能。