导航

萌即是正义!时不时分享一些ACG活动记录与有趣代码的小站!

【Vue 笔记】在搜索结果中高亮关键字

作者:广树·时间:2018-10-29 10:14:05·分类:JavaScript/jQuery/Vue

需求:有一组关键词数组,在数组中筛选出符合关键字的内容并将关键字高亮。

最终效果:

HTML:

<div class="q_iw_input_tip_item" v-for="(item, key, index) in wordTips" :key="index">
    <span>{{item.substr(0,item.indexOf(inputVal))}}</span><span class="font_c_red">{{inputVal}}</span><span>{{item.substr(item.indexOf(inputVal)+inputVal.length)}}</span>
</div>

Vue:

export default {
    data() {
        return {
            //关键词数组
            word:['apple','word','color','black','disc','element','four','give','hide','jquery','install','aabbcc'],
            //筛选后的关键词数组
            wordTips:[],
        }
    },
    methods:{
        //筛选关键词
        searchEvent(){
            this.wordTips = [];
            if(this.inputVal!=''){
                var reg =  new RegExp("^"+this.inputVal);
                for(var i =0;i<this.word.length;i++){
                    if(reg.test(this.word[i])){
                        this.wordTips.push(this.word[i]);
                    }
                }
            }
        }
    }
}




#Vue.js
侧边栏
最新评论
广树
2024-05-25
@Xia:也许对方在等一个有缘页面
Xia
2024-05-25
最后那个爬虫访问多太真实了,之前去翻我服务器的nginx日志,发现爬我服务器默认站点的爬虫比我博客还多(╯‵□′)╯︵┴─┴,搞不懂一个空白页有什么好爬的
广树
2024-05-24
@ONO:创轨结局还不错啊?看板娘是指封面吗?那个剧情需要一定条件才能触发
ONO
2024-05-24
妈耶!上次被《创轨》唤醒了热情之后,一直在等新作。快被创轨的结局气死了,到最后都不知道看板娘是谁!
广树
2024-05-24
@老张博客:不能服老呀!
正在攻略

圣兽之王.jpg

传颂之物

PSN奖杯卡

PSN奖杯卡

赞助商广告