vue项目中一行文本文字根据关键字改变颜色改变展示颜色

原创于 2022-12-28 16:11:53 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在Vue项目中实现根据关键字动态改变文本颜色的功能。通过计算属性修改原始数据，利用正则表达式实现特定词汇的高亮显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue项目中一行文本文字根据关键字改变颜色改变展示颜色

在这里插入图片描述

搜索农业农业颜色变为蓝色
代码 v-html=“item.title”

<el-form-item label="">
     <el-radio-group  v-model="form.secondRadioID">
              <el-row  v-for="item in disposeRadioList" :key="item.value">
                <el-radio :label="item.code"><span v-html="item.title"></span></el-radio>
              </el-row>
            </el-radio-group>
          </el-form-item>
1234567

计算属性中对原有的数据进行更改为html的

computed:{
    disposeRadioList() {
      let tworadioList = JSON.parse(JSON.stringify(this.radioList))
      tworadioList.forEach(e=>{
        e.title = e.title.replace(/-/g, ' / ') // 吧- 替换为 /
        e.title = e.title.replace(this.value, `<font color='#409eff'>${this.value}</font>`)
        return e   // 吧对应的关键字 替换为 `<font color='#409eff'>${this.value}</font>`
              }) 
      return tworadioList
    },
  },
1234567891011