vue关键词搜索,vue实现搜索关键字高亮显示
本文主要介绍了在vue中搜索关键词的例子，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
vue的搜索关键词1。定义搜索框2。在3点之前循环播放。在数据中，我们写入以下数据4。在方法5中。我们也可以这样写搜索函数和搜索结果的关键词高亮。首先实现搜索功能，通过计算出来的计算属性监控搜索内容的变化，然后实现搜索关键词的高亮显示。
vue的搜索关键字
1、定义一个搜索框
标签
搜索关键字：
input type= search name= id= value= v-model= keywords /
/标签
2、循环遍历，之前
v-for中的数据直接从数据列表中呈现。现在，我们定义了一个搜索方法，同时将所有的关键字以传递参数的形式传递给搜索方法。在search方法中，通过执行for循环，所有与搜索关键字匹配的数据都保存到一个新数组中并返回。
tr v-for=搜索中的项目(关键字):key=item.id
td{{ item.id }}/td
td v-text=item.name/td
td{{ item.ctime }}/td
/tr
3、在data中，我们写入如下数据
数据：{
id: ，
名称：，
关键词：，
列表：[
{id:1，姓名：李白，ctime:新日期()}，
{id:2，name:关羽，ctime:new Date()}，
{id:3，姓名：韩信，ctime:新日期()}，
{id:4，名称：木兰，ctime:new Date()}，
{id:5，name:丢西姆的故事，ctime:new Date()}，
{id:6，姓名： Lulu ，ctime:新日期()}，
{id:6，姓名：大乔，通话时间：新日期()}，
{id:6，姓名：荆轲，ctime:new Date()}，
{id:6，姓名：项羽，ctime:new Date()}，
{id:6，name:典韦，ctime:new Date()}，
{id:7，姓名：“小乔”，通话时间：新日期()}
]
},
4、在methods中
我们根据关键词搜索数据。
方法：{
Search(keywords) {//根据关键字搜索数据。
var newList=[]
this.list.forEach(item={
if(item.name.indexOf(keywords)！=-1){
newList.push(项目)
}
})
返回新列表
}
}
5、我们还可以这样写
注意：对于每个过滤器findIndex这些都是array的新方法，它将遍历数组中的每一项并执行相关操作。
注意：在ES6中，为字符串提供了一个名为String.prototype.includes(“要包含的字符串”)的新方法。如果包含，则返回true，否则返回false。
方法：{未定义
方法：{
Search(keywords) {//根据关键字搜索数据。
//注意：对于每个筛选器，findIndex都是数组的新方法，
//遍历数组中的每一项，并执行相关操作；
返回this.list.filter(item={
//if(item . name . index of(keywords)！=-1)
//注意：在ES6中，为字符串提供了一个名为string . prototype . includes( string to include )的新方法。
//如果包含，则返回true，否则返回false
//包含
if(item . name . includes(keywords)){
退货项目
}
})
}
}
搜索功能及搜索结果关键字高亮
先看效果图：
首先实现搜索功能
差异
Span景点搜索：/span
El-input prefix-icon= El-icon-search placeholder=请输入要搜索的景点名称或区域 v-model= filters . search val clear/El-input
/div
通过computed计算属性监听搜索内容的变化
计算值：{
列表：函数(){
var _ this=this
var arrByZM=[]；//定义一个新的空数组来存储匹配的内容。
for(var I=0；I _ this . address list . length；i ) {
if(_ this . address list[I]. name . search(_ this . filters . search val)！=-1 _ this . address list[I]. address . search(_ this . filters . search val)！=-1) {
arrbyzm . push(_ this . address list[I])；//将匹配的内容添加到arrByZM数组
}
}
返回arrByZM//返回一个新数组
}
},
以上实现了搜索功能。
下边实现搜索关键字高亮显示
使用v-html绑定方法名并传递两个参数。第一个参数是：景点名称；第二个参数是在搜索框中输入的搜索内容。
div class=xph-list-r
差异景点：span v-html= brighten关键字(item。name，filters.searchVal) /span/div
差异位置：span v-html= brighten关键字(item。address，filters.searchVal) /span/div
/div
在方法中添加方法让搜索到的关键字高亮显示（以下提供两种方法，本人使用的是第二种)
方法：{
brightenKeyword(val，keyword) {
//方法1:筛选变色
//val=val " "；
//if (val.indexOf(keyword)！==-1关键字！==) {
//返回val.replace(关键字， font color= # 409 eff keyword /font )
//}其他{
//返回值
//}
//方法2:用正则表达式
const Reg=new RegExp(关键字，‘我’)；
if (val) {
const res=val.replace(Reg， span style= color:# 3a alff；$ { keyword }/span `)；
//控制台。日志(分辨率)；
返回表示留数
}
},
},
至此完成搜索效果及搜索结果关键字高亮效果。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。