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

本文介绍如何在Vue项目中使用v-html结合计算属性实现列表项关键字的动态高亮显示,通过具体代码示例展示了如何将指定词汇变更为带有颜色标记的HTML格式。

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

在这里插入图片描述

  • 搜索农业 农业颜色变为蓝色
  • 代码 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>
  • 计算属性中对原有的数据进行更改为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
    },
  },
  • v-for=“item in disposeRadioList” v-html 使用即可

有更好的希望下面回复 谢谢

可以的大家点点关注-总结不易谢谢大家-也可以留言需要哪类的我也可以尝试

### 自定义 `el-alert` 组件中的字体样式 为了自定义 `el-alert` 组件内的字体样式,可以通过多种方式实现这一目标。一种常见的方式是在全局或局部范围内覆盖默认样式。 #### 使用内联样式或类名来定制字体样式 如果希望仅针对特定实例应用样式更,则可以在模板中直接添加带有样式的类或将样式属性应用于组件标签: ```html <template> <!-- 应用自定义类 --> <el-alert class="custom-font-style" title="这是一个具有自定义字体大小和颜色的警告框" type="warning"></el-alert> <!-- 或者使用内联样式 --> <el-alert style="font-size: 18px;color:#ff0000;" title="这是另一个例子" type="error"></el-alert> </template> <style scoped> /* 定义 .custom-font-style 类 */ .custom-font-style { font-family: 'Arial', sans-serif; font-weight: bold; color: blue !important; /* 覆盖原有颜色 */ } </style> ``` 上述方法允许通过 CSS 来调整字体系列、粗细以及颜色等特性[^1]。 #### 利用 Vue 的单文件组件 (SFC) 特性 对于更复杂的场景,可以利用 Vue 单文件组件的能力,在 `<style>` 部分编写更具针对性的选择器,甚至采用预处理器如 SCSS/SASS 提高开发效率: ```scss // 假设项目配置支持 SASS/SCSS 编译 <style lang="scss"> .el-alert--success.is-light { // 修成功提示下的文本样式 .el-alert__title { font-size: 2em; text-transform: uppercase; } } // 如果需要影响所有类型的警报消息体内容 .el-message-box__message, .el-notification__content{ p { line-height: 1.5rem; margin-bottom: 0; } } </style> ``` 这种方法不仅限于改变字体本身,还可以进一步控制其他视觉效果,比如行间距、边距等[^2]。 #### 注意事项 当尝试重写第三方库提供的组件样式时,可能遇到特异性问题——即新规则未能生效的情况。此时应考虑增加选择器权重或是适当运用 `!important` 关键字确保自定义样式优先级高于原生样式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值