Javascript/Vue : set background-color on specific parts of string, 基于数组中的匹配值

Question

我正在努力制作一个脚本，该脚本在字符串的特定部分设置背景颜色(或在这种情况下为输入，但不一定...)。

解决方案是用 VUE 制作的，但我认为这必须用核心 javascripting 来解决。

HTML :

<div class="col-sm-7">
    <input v-model.lazy="item.text" class="form-control" style="width:98%">
</div>

VUE 计算:

nluData() {
        return orderby(this.$store.getters.nlujson.filter(item => {
            return item.intent.toLowerCase() === this.selectedIntent
        }), ['intent', 'text'], ['asc', 'asc'])
    },

JSON结构截图:

所需结果的屏幕截图(箭头指向的地方，字 block 应为背景色:

Answer 1

您可以使用 v-html 并根据需要设置文本样式。

<span v-html="text"></span>

并且在您的组件中，您可以根据需要使用计算值:

computed: {
     text () {
        // Code logic of your convenience 
        // Be careful of XSS attack.
        return '<b>' + this.someText + '</b>';
     }
}