js更改字符串的颜色

js更改字符串的颜色

代码：

<template>
    <div class="dm">
        <!-- 无缝滚动效果 -->
        <div class="marquee-wrap">
            <ul class="marquee-list" :class="{'animate-up': animateUp}">
                <li v-for="(item, index) in listData" :key="index">
                    <span v-html="item"></span>
                </li>
            </ul>
        </div>   
    </div>
</template>
<script>

export default {
  name: "dm",
  data() {
    return {
      animateUp: false,
      listData: [],
      
      formData: {
        content: ''
      }
    }
  },
  methods: {
    send() {
        this.$http.post(`/dm/barrage/save`,this.formData).then(({ data:res}) => {
            if (res.code !== 0) {
                return this.$message.error(res.msg)
            }
            this.$message({
                message: this.$t('prompt.success'),
                type: 'success',
                duration: 500,
                onClose: () => {
                    let msg = res.data.username+", " + res.data.realName + ": " + this.formData.content
                    msg = msg.replace(this.formData.content, "<font color=\"red;\">" + this.formData.content+"</font>")
                    this.listData.push(msg)
                    this.formData.content = ''
                }
            })
        }).catch(() => {})
    },
  },
  
}
</script>  
  

注意：主要是显示的时候，用v-html显示，然后方法中用replace替换