Как изменить цвет текста подстроки, найденной в строке, которая соответствует ключу поиска в Vuejs? - PullRequest
Новая
       34

Как изменить цвет текста подстроки, найденной в строке, которая соответствует ключу поиска в Vuejs?

0 голосов
/ 19 марта 2020

У меня есть панель поиска, и у меня есть несколько предложений в виде списка. Я хочу выделить или изменить цвет текста той части строки в списке предложений, которая соответствует ключу поиска в строке поиска. Я использую Vue js и попутный ветер. Кто-нибудь может помочь?

1 Ответ

0 голосов
/ 19 марта 2020

Мое предложение заключается в том, что вы визуализируете вычисленное значение текста, по которому вы выполняете поиск, который включает search_key внутри тега, который выделяет его. (Я думаю, это также будет работать с использованием метода). Вот фрагмент, который дает вам представление о том, как вы можете это сделать. 

<template>
    <div>
        <input v-model="search_key" placeholder="search ">
        <div v-html="textpWithHilght"></div>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                'search_key': '',
                'theText': "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
            }
        },
        computed: {
            textpWithHilght: function(){
                return this.theText.replace(
                    this.search_key, 
                    '<span class="bg-yellow-200">' + this.search_key + '</span>')
            }
        },
    }
</script>

Его можно значительно улучшить (с помощью регулярных выражений, чувствительности к регистру, ...), но я надеюсь, что это полезно

...