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实现根据输入框值调用接口进行模糊查询的基本步骤。通过双向绑定和事件绑定，我们可以轻松地实现这一功能。