导航

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

侧边栏
热门文章
1博文
打卡护照同款景点:台湾六日游 day2 日月潭和清境农场
热度
285
2页面
程序员老黄历&求签
热度
273
3博文
初见台湾:台湾六日游 day1 从东京到台中
热度
234
4博文
探访《蜡笔小新》老家——春日部游记
热度
234
5博文
3DS模拟器简体中文字库 | Citra3ds字库 | 符文工房4乱码解决字库 | shared_font.bin
热度
117
6推文
给《悠哉日常大王》的旧小川小学校下里分校圣地巡礼剪辑了完整的圣地巡礼视频: https://www.bilibili.com/video/BV1Qm5vzMEzY/
热度
78
7博文
历经多重考验的第一天——《摇曳露营△》圣地巡礼之伊豆高原大室山和仙人掌动物公园
热度
65
8博文
如何使用宝塔/aaPanel搭建猛男自用的维基萌博客
热度
65
9博文
日本SoftBank光网速慢的解决方法
热度
65
10推文
今天去看了首部初音未来的电影《剧场版 世界计划 破碎的世界与无法歌唱的未来》。 说是初音未来的电影,但其实是手游《世界计划》的剧场版。好像有挺多人看到是初音未来的电影就去看了,结果发现并不全是😅。其实在宣传海报中,初音未来后面的那些人才是主角。 不过,我也是那些没玩过手游的观众之一。其实整场看下来问题也不是很大,就是对于人物关系和世界观的设定可能会有些问题。电影其实也很贴心地在剧情开头,大致以剧情的形式展示了手游中的五个团体的人物及其性格,但感觉还是有些杯水车薪,约等于看个眼熟。 此次的电影是第一次购买应援场。所谓的应援场,就是能在电影院里像是听演唱会一样挥舞荧光棒和尽情呐喊。看着前排那些粉丝看到自己喜欢角色时的呐喊,以及演唱会环节的打CALL,应援场确实是很有意思的一种电影观看方式呢! 剧情方面,属于看了开头大概能猜到整部动画的剧情走向。不过,通过演唱会的气氛渲染,甚至还感受到了一丝丝的感动。 总体来说,对于手游的粉丝来说可能是嘉年华般的狂喜,对于没接触过手游的路人来说也能一定程度融入其中,属于一部不错的粉丝向电影(不管是手游粉丝还是初音未来粉丝)。 首周电影特典是CD和游戏内的兑换码。送CD这种形式还第一次遇到,官方大气!
热度
52
最新评论
广树管理员
2025-05-07 21:00
@ZeroCounter:哈哈哈,被发现啦
ZeroCounter
2025-05-07 14:06
原来博主是可爱的二次元女孩子(→游船上那张全景
广树管理员
2025-05-06 14:31
@ZeroCounter:这样啊,逐渐听不懂现在的网络热梗了😅
ZeroCounter
2025-05-06 13:41
@广树:一个梗啦,表示很无语( 因为国内的阅读理解题经常写表达了作者的思乡之情(
广树管理员
2025-05-06 11:13
@ModerRAS:云台拍摄全景需要固定不动,时间也长,有一定场景限制。
攻略中
星空列车与白的旅行
暂无评分
Steam星空列车与白的旅行
2025年2月22日 22时 ~ 攻略中
已累计游玩2个月15天
乘坐的列车,划破夜空,飞驰在星空之下,令人心旷神怡——这可真是场超值之旅。舒爽夜风吹拂下的随心独旅中,我邂逅了随性的乘客,可人怜爱的乘务员。以及……猫耳少女?这场旅行,究竟会在她身上,留下了些什么呢?
PSN奖杯卡

PSN奖杯卡

归档
赞助商广告

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

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

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

最终效果:

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]);
                    }
                }
            }
        }
    }
}




donate.png

1210 x 50(蓝底).png

cloudcone