v-for 中的数据,都是直接从 data 上的list中直接渲染过来的,现在,我们自定义了一个 search 方法,同时,把所有的关键字,通过传参的形式,传递给了 search 方法,在 search 方法内部,通过 执行 for 循环,把所有符合 搜索关键字的数据,保存到一个新数组中,返回
我们根据关键字,进行数据的搜索
注意:forEach some filter findIndex 这些都属于数组的新方法,都会对数组中的每一项,进行遍历,执行相关的操作
注意:ES6 中,为字符串提供了一个新方法,叫做String.prototype.includes('要包含的字符串'),如果包含,则返回 true,否则返回 false
methods:{undefined
先看效果图:
以上实现搜索功能
使用v-html绑定方法名并传递两个参数,第一个参数是:景点名称;第二个参数是:搜索框内输入的搜索内容
在methods中添加方法让搜索到的关键字高亮显示(以下提供两种方法,本人使用的是第二种)
至此完成搜索效果及搜索结果关键字高亮效果。