首页vue input 输入后触发blur

vue input 输入后触发blur

时间: 2023-07-05 10:03:16 浏览: 891

vue实现Input输入框模糊查询方法

在Vue.js中，实现Input输入框的模糊查询功能是一项常见的需求，特别是在开发数据过滤和搜索功能时。Vue的响应式特性使得我们可以轻松地监听输入框的变化，并实时更新数据列表。以下是一个详细的步骤来解释如何在Vue中实现这个功能： 1. **创建Vue实例**：我们需要创建一个Vue实例，其中包含我们需要搜索的数据。在这个例子中，数据存储在一个名为`xmgcqkJsonsData`的数组中。 2. **HTML模板**：在模板部分，我们需要一个`<input>`元素来获取用户的输入，并将其绑定到Vue实例的一个属性，比如`jobNo`，这将用于执行模糊查询。同时，我们需要一个按钮来触发搜索操作，它的`@click`事件可以绑定到Vue实例的方法`search`。 ```html <input type="text" v-model="jobNo" placeholder="请输入工单号/流水号"> <button @click="search">搜索</button> <ul> <li v-for="item in xmgcqkJsonsData" :key="item.id">{{ item.code }} - {{ item.name }}</li> </ul> ``` 3. **Vue实例的`data`选项**：定义Vue实例的`data`选项，包括用户输入的搜索关键词`jobNo`和原始数据数组`xmgcqkJsonsData`。 ```javascript data() { return { jobNo: '', xmgcqkJsonsData: [/* 原始数据 */], }; }, ``` 4. **Vue实例的`methods`选项**：在`methods`选项中，我们需要定义`search`方法，该方法负责处理模糊查询逻辑。我们将用户输入的`jobNo`转换为小写，以便不区分大小写地进行模糊匹配。然后，我们使用JavaScript的`filter`方法遍历数据数组，对于每个元素，检查其`code`属性是否包含搜索关键词。如果包含，我们将该元素添加到一个新的数组`newListData`中。我们将`newListData`赋值给`xmgcqkJsonsData`，从而更新视图显示的结果。 ```javascript methods: { search() { const _search = this.jobNo.toLowerCase(); const newListData = []; if (_search) { this.xmgcqkJsonsData .filter(item => item.code.toLowerCase().indexOf(_search) !== -1) .forEach(item => newListData.push(item)); } this.xmgcqkJsonsData = newListData; }, }, ``` 5. **扩展模糊查询条件**：如果你需要根据其他字段进行搜索，例如项目/工程名称`name`，只需在`filter`函数的判断条件中增加新的检查。例如： ```javascript .filter(item => ( item.code.toLowerCase().indexOf(_search) !== -1 || item.name.toLowerCase().indexOf(_search) !== -1 )) ``` 6. **优化性能**：对于大数据量的情况，可以考虑使用`computed`属性来缓存过滤结果，避免每次输入都重新过滤整个数据集，提高性能。 7. **实时监听输入**：除了点击按钮触发搜索，还可以通过监听`jobNo`的变化，实时更新搜索结果，这可以通过`watch`实现。 ```javascript watch: { jobNo(newVal) { this.search(); }, }, ``` 通过以上步骤，你就可以在Vue应用中实现一个基本的Input输入框模糊查询功能。当然，实际应用中可能还需要考虑更多的细节，比如错误处理、输入提示、性能优化等。但这个基础实现已经能够满足大多数简单的需求。在深入学习Vue.js的过程中，理解并熟练运用这些基本概念是非常重要的。

在 Vue 中，可以通过 `v-on:blur` 或 `@blur` 绑定事件监听 input 的 blur 事件，然后在事件处理函数中执行相应的操作。例如： ```html <template> <div> <input type="text" v-model="inputValue" @blur="handleBlur"> </div> </template> <script> export default { data() { return { inputValue: '' }; }, methods: { handleBlur() { console.log('input blur'); // 执行相应的操作 } } }; </script> ``` 当输入框失去焦点时，会触发 `handleBlur` 方法，并执行其中的操作。

阅读全文