在现代 Web 开发中，搜索功能已经成为了不可或缺的一部分。在 Vue.js 中，实现搜索功能并不难，本文将为您介绍如何在 Vue.js 中实现搜索功能。
1. 在 Vue.js 中使用过滤器实现搜索
Vue.js 的过滤器是一个很有用的功能，可以轻松的处理数组和对象的数据。我们可以使用过滤器处理数据并将结果反映到页面上，从而实现搜索。
假设我们有一个包含一些数据的数组，例如：
data: [
{name: 'John', age: 22},
{name: 'Mary', age: 25},
{name: 'Tom', age: 20},
{name: 'Alice', age: 30}
]我们可以使用以下代码来实现搜索：
Vue.filter('searchFor', function (value, searchStr) {
return value.filter(function (item) {
return item.name.toLowerCase().indexOf(searchStr.toLowerCase()) !== -1
})
})这个过滤器会接收一个数组和一个搜索字符串，然后会过滤出所有 name 包含搜索字符串的元素，并返回一个新的数组，该数组只包含搜索结果。
在模板中，我们可以使用以下代码来调用这个过滤器：
-- -------------------- ---- -------
----------
-----
------ ---------------- ---------------------
----
--- ----------- -- ---------------- --------- -------
-----
------
-----------
--------
------ ------- -
---- -- -
------ -
----- -
------ ------- ---- ----
------ ------- ---- ----
------ ------ ---- ----
------ -------- ---- ---
--
------- --
-
--
--------- -
------------ -- -
------ ------------------------------------------ ------------
-
-
-
---------在这个例子中，我们使用 v-model 来绑定输入框中的值，每当用户输入新的字符时，搜索就会重新计算并更新 filteredData 中的值，最后通过使用 v-for 指令，将搜索结果渲染到页面上。
2. 在 Vue.js 中使用插件实现搜索
除了使用过滤器，我们还可以使用插件来实现搜索功能。插件可以为我们提供更强大的功能和更好的性能。
我们可以使用 vue-multiselect 插件来实现搜索功能，这个插件可以帮助我们在 select 和 multiselect 组件中集成搜索功能。
安装 vue-multiselect 插件：
npm install vue-multiselect --save
在 main.js 中导入并注册：
import Multiselect from 'vue-multiselect'
Vue.component('multiselect', Multiselect)然后在模板中使用 multiselect 组件，并设置 searchable 属性为 true：
<multiselect v-model="selected" :options="options" :searchable="true" />
在 script 中使用以下代码来初始化选项和选定的值：
-- -------------------- ---- -------
--------
------ ------- -
---- -- -
------ -
--------- -----
-------- -
------ ------- ---- ----
------ ------- ---- ----
------ ------ ---- ----
------ -------- ---- ---
-
-
-
-
---------当用户在搜索框中输入新的字符时，multiselect 组件会自动过滤出匹配的选项并更新选项列表。
总结
在本文中，我们介绍了在 Vue.js 中实现搜索功能的两种方式：使用过滤器和插件。无论您使用哪种方式，都可以轻松的实现搜索功能。本文中的示例代码可以帮助您更好的理解如何实现搜索功能，并为您的实际开发提供参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e5702cf6b2d6eab30df500