vuejs搜索关键字高亮显示并且实现切换显示下一个选项多种方法

参考资料：

https://segmentfault.com/q/1010000038543596?_ea=87295903

第一种方法：

手写：（温馨提示：这里的style不能写在scoped里，否则css样式无效）

<template>
    <div>
        <el-button
            v-for="item in list"
            :key="item.id"
            @click="clickBtn(item.value)">{{ item.value }}</el-button>
        <div v-html="voiceContent"></div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            list: [{id: 1, value: '你们'}, {id: 2, value: '什么'}, {id: 3, value: '来'}],
            select: '',
            text: '出来没有？你们什么时候来的？',
            selectIndex: 1
        };
    },
    computed: {
        voiceContent() {
            const regText = this.list.map(item => item = item.value).join('|');
            let index = 0;
            return this.text.replace(new RegExp(regText, 'g'), (a, b, c) => {
                if (this.select == a) index++;
                return `<span class="${this.select == a && this.selectIndex == index ? 'red' : 'yellow'}">${a}</span>`;
            });
        }
    },
    methods: {
        clickBtn(value) {
            const num = this.text.match(new RegExp(value, 'g')).length;
            if (this.select == value && num > this.selectIndex) {
                this.selectIndex++;
            } else {
                this.select = value;
                this.selectIndex = 1;
            }
        }
    }
};
</script>
<style>
    .yellow{
        color: yellow;
    }
    .red{
        color: red;
    }
</style>

效果图：

第二种方法：

少侠，看看这个：https://github.com/Lushenggan...

在线体验：
laboratory

有用帮忙点个星星~