后端渲染内容中一部分字改变颜色

最新推荐文章于 2023-06-15 19:06:20 发布
最新推荐文章于 2023-06-15 19:06:20 发布
阅读量404 收藏 2
点赞数 1
文章标签： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gxh0816/article/details/121967296
版权

如果我们的内容是由后端渲染得到,但我又希望统一的去改变一部分的字体颜色,比如正常状态为一个颜色,异常状态又为一个颜色
在这里插入图片描述
如果需要改变的颜色过多怎么办呢?比如一部分绿色,一部分红色,蓝色…这个时候再用三元表达式就容易出错了.之前就强调过,

超过三个就不要用三元表达式了

这个可以看到用的是

过滤器.

在这里插入图片描述
在这里插入图片描述在这里插入图片描述
我们这里准备现实的文字用的其实也是过滤器
在这里插入图片描述

爱前端的小周同学
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端将后端返回的带颜色的数据进行转换
weixin_44669549的博客
06-05 2285
前端将后端返回的带颜色的数据进行转换 因为之前在调用后端接口的时候 后端返给我的数据显示乱码：具体如下图所示： 然后这些数据 在后台显示的是这样的的，如下图所示： 根据以上这三幅图片可以看到有些数据 在后台显示的时候 有些代码是带颜色的，而在前端显示的时候 会显示成乱码。所以我们可以根据这个特点去想，怎么在网页上显示终端的颜色。 解决方法(ansi)在网页中显示终端颜色 终端命令为了可以友好的显示大多数都支持了颜色显示。 在终端中良好的颜色显示， 能够让我们处理问题更加高效，但是在运维开发中， 难免要
vue项目中将后端返回的文本中的数字和特殊文本标红显示
fyc_away的博客
06-02 2357
将文本中的"返还"和数字(一般是小数)标红显示 1、数据处理 // 处理列表显示 handleTableData(data) { // data 是后端返回的列表数据, 在这进行处理 const result = []; const replaceText = []; const numberText = []; for (let i = 0; i <= 9; i += 1) { replaceText.push(`${i
根据后端返回不同数据显示不同颜色
DZQ1223的博客
06-15 386
当前状态为充电时，显示"#15BC83"，放电时显示"#FF811A"，其他情况显示red。
后端返回状态，前端显示对应的值，以及颜色
weixin_55799355的博客
03-24 1095
const STATUS_TYPE: any = { 1: { color: '#f50', text: '待提醒' }, // 1代表后端返回的字段 2: { color: '#87d068', text: '已提醒' }, 3: {color:'',text:'全部'} } console.log(STATUS_TYPE[1].text) //待提醒 console.log...
关于表格：接口返回的表格数据加上黄色圆点渲染到页面，并且根据不同的数据渲染不同的颜色
weixin_46100406的博客
06-09 301
问题二：接口返回的表格数据加上黄色圆点渲染到页面，并且根据不同的数据渲染不同的颜色 解决办法： render: (h, param) => { return h("span", [ h( "span", { class: `release ${param.row.tableStatus + "-color"}`
改变后端返回文案部分字体颜色
m0_46512929的博客
11-18 660
//把其他规则的三改成a标签---'<a style="color:#E60027;text-decoration: none; ">' changea(str) { str = str.replace( /&/g, '<a style="color:#E60027;text-decoration: none; ">' ); str = str.replace(/@/g, "</a&g...
Blazor中的乐谱-第一部分
04-04
综上所述，"Blazor中的乐谱-第一部分"涉及到的技术栈广泛，包括Blazor组件化开发、SVG图形渲染、CSS样式控制、.NET Core后端服务以及JSON数据交换。通过这些技术的综合运用，开发者可以构建出一个功能完善的在线乐谱...
纯色图标一套可做开发使用
最新发布
02-10
对于后端开发者，这些图标可以作为资源文件包含在项目中，当需要展示图标时，通过API接口返回对应的图标数据，供前端渲染。同时，为了保证不同设备和浏览器的兼容性，开发者需要注意提供多种格式的图标，如PNG、JPEG...
基于java swing开发的小游戏.zip
12-17
此外，项目中的图形渲染过程可以帮助理解Java 2D图形API，包括画布绘制、颜色填充、线条绘制等。 在毕业设计或课程设计中，这样的项目具有很高的实用价值。它可以锻炼学生的实际操作能力，提高他们的问题解决技巧，...
灯：myROOM中的LAMP
02-13
他们可能会定义类来表示灯的属性（位置、颜色、亮度等），并编写方法来改变这些属性或响应用户的操作。同时，考虑到实时性，他们可能需要优化算法以确保在不影响性能的情况下提供流畅的用户体验。 此外，如果myROOM...
分享一款不错的APP下载官网单页源码.zip
01-14
单页应用程序（Single Page Application，SPA）是一种Web应用架构模式，整个应用只加载一个HTML页面，后续的操作都在这个页面上进行，通过动态更新DOM（Document Object Model）来改变页面内容，提供类似桌面应用的...
后台返回的字符串，前端需要把其中的数字变成红色
shy256的博客
09-27 1365
需求：后台返回的字符串，前端需要把其中的数字变成红色 这是一个vue 项目, 也是翻了很多的大佬写的博客，自己总结了一下，开始时循环这个字符串，利用过滤器实现了这个需求，但是这样严重消耗了浏览器的性能，创建出了很多的span 标签，经过大佬的点播，换了一种方法，上代码： <!-- html代码 --> <div v-html="str"></div> data () { return { str: '' } }, methods: { strInit (
UITextView 设置同一段文字，多个文字颜色
一品大帅的专栏
07-20 1643
利用NSMutableAttributedString实现 预览图如下 创建 NSAttributedString let subjectString1 = NSAttributedString(string: "CLUD: ", attributes: [NSAttributedStringKey.foregroundColor: UIColor.white, NSAttrib...
根据后端返回不同内容显示不同颜色/图片
m0_60827885的博客
04-22 401
<template> <div class="container"> <div class="beer-weather"> <div class="beer-temperature"> <img :src=" require(`@/assets/images/beerCity/weather_code_${this.weatherList[0].code?this.weather.
vue-通过数组实现文字字体变色
weixin_44098615的博客
07-15 956
vue的API文档：https://cn.vuejs.org/v2/guide/syntax.html API文档中对指令的解释：指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。 按我的理解指令有点像命令，通过特定的指定，对元素进行赋值，点击事件，js运算等等各种操作。 这里使用v-bind，v-on指
从后端接口拿过来的多个值，根据值得不同，定义不同的字体颜色或者背景颜色。 即定义不同样式；
weixin_56898375的博客
05-11 1291
从后端接口拿过来的多个值，根据值得不同，定义不同的字体颜色或者背景颜色。 即定义不同样式；
iview table的render函数中如何设置元素的样式
fanyanjiang的博客
12-19 6931
在html5页面中，我们知道设置元素样式的方法有2种：一种是直接在元素标签中添加style属性并设置样式，另一种是给元素添加class属性然后给class属性设置样式。既然原生的html页面有这两种设置属性的方式，那么iview的render函数当然也可以这么给元素添加样式啦。 render函数添加样式的两种方法： 第一种方法：直接设置style属性 “操作”列的render函数如下代码： {...
iview table 中用根据不同状态改变颜色（用render）
weixin_30881367的博客
07-06 2705
效果如下： 转载于:https://www.cnblogs.com/wangdashi/p/9274125.html
前端浏览器工作流程：从请求到渲染深度解析
当DOM或CSSOM发生改变时，浏览器需要更新渲染树，这可能导致回流（元素的位置或尺寸调整）和重绘（只更新部分可见区域的样式）。减少不必要的回流和重绘对于提升用户体验至关重要，可以通过优化CSS选择器、避免频繁...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值