如何更改在与 Vuejs 中的 search_key 匹配的字符串中找到的子字符串的文本颜色？

Posted 2023-03-07

【中文标题】如何更改在与 Vuejs 中的 search_key 匹配的字符串中找到的子字符串的文本颜色？

【英文标题】：How to change text-color of a substring found in a string which matches the search_key in Vuejs?

【发布时间】：2020-06-30 21:21:27

【问题描述】：

我有一个搜索栏，我有一些建议作为列表。我想突出显示或更改建议列表中与搜索栏中的 search_key 匹配的字符串部分的文本颜色。我正在使用 Vue js 和 tailwind。有人可以帮忙吗？

【问题讨论】：

到目前为止你做了什么

【参考方案1】：

我的建议是你渲染你搜索的文本的计算值，将 search_key 包裹在一个标签内，突出显示它。 （我想它也可以使用一种方法）。 这里的 sn-p 让你知道你可以做到这一点。

<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>

它可以改进很多（使用正则表达式，区分大小写，...）但我希望它会有所帮助