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

最新推荐文章于 2024-06-01 15:46:07 发布

一天不写代码就难受的小金

最新推荐文章于 2024-06-01 15:46:07 发布

阅读量941

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_46016217/article/details/128470077

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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