在vue`框架中使用javascript动态修改字符串指定字符的颜色。

<template>
    <div style="height:200px;">
        <div style="margin-left: 5px;margin-top:2px;margin-right:5px;line-height:29px;"  v-html="result_text_show"></div>
    </div>
</template>

<script>
    export default {
        name: "demo",
        data(){
            return{
                result_text_show,
            }
        },
        created:function(){
            this.getStringColorReplace();
        },
        methods:{
            getStringColorReplace:function() {
                //假设使用固定的文本，可后台接收
                var show_text = '学校查获禁止垃圾食品，并进行了检查。';
                var replace_text= ["学校","垃圾食品","检查"]
                var color_dict = {"学校":"rgb(76,142,218)","垃圾食品":"rgb(255,224,129)","检查":"rgb(247,151,103)"}
                for(var i=0;i<replace_text.length;i++){
                    var color_temp = color_dict[replace_text[i]];
                    var replaceString = '<span style="color: ' + color_temp + ';">' + replace_text[i] + "</span>";
                    show_text = show_text.replace(RegExp(replace_text[i],'g') ,replaceString);
                }
                this.result_text_show = show_text;
            },
        }
    }
</script>

<style scoped>

</style>

此代码的结果如下图所示：