后端返回状态，前端显示对应的值，以及颜色

最新推荐文章于 2023-07-20 23:54:22 发布
原创 最新推荐文章于 2023-07-20 23:54:22 发布 · 1.2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react.js #javascript #前端

这个博客内容展示了JavaScript对象常量STATUS_TYPE，它包含了三种状态及其对应的文本和颜色编码。状态1表示待提醒，颜色为红色；状态2表示已提醒，颜色为绿色；状态3表示全部，没有特定颜色。示例代码中打印了状态1的文本和颜色值。 
   const STATUS_TYPE: any = {
            1: { color: '#f50', text: '待提醒' },  //  1代表后端返回的字段
            2: { color: '#87d068', text: '已提醒' },
            3: {color:'',text:'全部'}
        }
        console.log(STATUS_TYPE[1].text)  //待提醒
        console.log(STATUS_TYPE[1].color) //#f50
从零开始学Angular全栈开发：前端框架与后端API完美结合
AI天才研究院
06-13 1013
在“前端负责颜值，后端负责实力”的全栈时代，掌握前后端协作是开发者的必备技能。本文聚焦“Angular前端 + Node.js后端”的经典组合，覆盖从环境搭建、组件开发、服务封装到API联调的全流程，帮你快速上手全栈开发。本文采用“故事引入→概念拆解→实战演练→场景拓展”的递进结构：先通过“智能餐厅”故事理解前后端协作；再拆解Angular核心概念与后端API设计；最后用“博客系统”案例演示完整开发流程，确保学完就能动手做项目。Angular组件。
超详细的前后端实战项目（Spring系列加上vue3）前端篇+后端篇（三）（一步步实现+源码）
最新发布
2301_79969279的博客
05-25 3467
（因为要统一结果输出样式，这边写了一个结果封装类）/*** 统一响应结果封装类*///1 成功 , 0 失败//提示信息//数据 datareturn msg;r.code = 1;return r;r.code = 1;return r;r.code = 0;return r;
从后端接口拿过来的多个值，根据值得不同，定义不同的字体颜色或者背景颜色。 即定义不同样式；
weixin_56898375的博客
05-11 1498
从后端接口拿过来的多个值，根据值得不同，定义不同的字体颜色或者背景颜色。 即定义不同样式；
根据后端返回字段显示不同的颜色
温小鹿的博客
06-18 900
根据后端返回字段显示不同的颜色
解决 前端显示后端返回的null值为 1的问题
请告诉他
07-20 1253
【代码】解决 前端显示后端返回的null值为 1的问题。
将后端数据渲染上不同颜色后显示到前端
weixin_35756624的博客
02-13 525
要将后端数据渲染为不同颜色并在前端显示，可以使用以下步骤： 在后端程序中，对数据进行处理并为每一个数据项分配一个特定的颜色。 将处理后的数据以 JSON 或 XML 等格式返回给前端。 在前端程序中，使用 JavaScript 或其他前端技术获取数据并显示。 使用 CSS 或 JavaScript 将每个数据项的颜色应用到前端显示的元素上。 这些步骤可以帮助您在前端展示不同颜色的后端数...
根据后端返回不同数据显示不同颜色
DZQ1223的博客
06-15 648
当前状态为充电时，显示"#15BC83"，放电时显示"#FF811A"，其他情况显示red。
封装 后台返回列表中不同状态展示不同数据颜色
lzfengquan的博客
04-26 1958
原本我们正常的接口调取和渲染列表就没啥事了，现在需要优化一下，看着好看点，那我们就封装一下，让其他域的也能调用我们的封装，写个公共组件引用就OK了。 我们以react 项目为例 在我们需要改变状态颜色的页面引入我们的公共颜色配置就搞定了 import { statusMap } from '@/utils'; { title: '核销状态', align: 'center', dataIndex: 'verStateName', render: (text, record) => .
python前端调用后端模型_【Python】【Flask】前端调用后端方法
weixin_39908588的博客
12-07 906
后端代码：@app.route("/test",methods=['POST','GET'])def test():return "我是测试的"前端代码：1、使用标签我是测试这个是最简单的，点击一下，就自动跳转了。2、使用的onclick说起这个，光这个click就折腾了我一整天了。网上找不到啊。初学 网页+Python+Flask，所以根本不懂啊，又找不到。最后终于解决。点我啊之前为什么一直失败...
在PHP后端读取数据表，根据$row['status']值的不同，实现用不同的颜色返回JSON格式数据到PHP前端
06-10
在 PHP 后端读取数据表时，可以根据 `$row['status']` 的值设置相应的颜色信息，并将其添加到 JSON 数据中，然后将 JSON 数据返回到 PHP 前端。以下是一种实现方式： ```php // 定义不同状态值对应的颜色信息 $...
Vue 项目 页面主题颜色，字体颜色由后台返回数据控制
yongyafang123的博客
04-10 2808
** 需求： ** 同一个页面，可以根据后台返回的颜色值，改变页面的色调 方式 无需多言 直接上代码 <template> <div class="theme" :style="colorProps"> <div class="btn"> <div class="class1">我的字体颜色是红色的...
vue中将后台返回的数字转换成对应的文字，通过动态绑定类名修改文字颜色
铁锤妹妹的博客
03-18 3339
前言： 项目中有展示订单状态这样一个需求，后端数据返我的是数字，但前端展示的是文字‘已购买’，‘退卡中’，‘未购买’；后端要求是数字为10表示‘已购买’颜色为绿，11或者12代表‘退卡中’颜色为橙，null代表‘未购买’颜色为红；基于这个需求，来记录一下 这里用到了vue的动态绑定类名 思路： 先在样式里定义好用到的几个颜色 vue的动态绑定类名，如果item.earn_profit_type == '10'为true，class类名就是green，如果item.earn_profit_type ==
后端返回的数据是数字但是前端需要根据数字渲染不同状态（枚举方法）
weixin_70426591的博客
10-30 812
枚举法
后台返回的字符串，前端需要把其中的数字变成红色
shy256的博客
09-27 1588
需求：后台返回的字符串，前端需要把其中的数字变成红色 这是一个vue 项目, 也是翻了很多的大佬写的博客，自己总结了一下，开始时循环这个字符串，利用过滤器实现了这个需求，但是这样严重消耗了浏览器的性能，创建出了很多的span 标签，经过大佬的点播，换了一种方法，上代码： <!-- html代码 --> <div v-html="str"></div> data () { return { str: '' } }, methods: { strInit (
Avue-crud根据后端返回的字段的prop,去改变前端的展示
m0_57364615的博客
03-18 1998
举个例子: 如果你在使用avue 的 avue-crud 组件,现在呢后端返回给你一个性别(sex)的字段,如果是男该字段值1,如果是女该字段值是2,你是不是无从下手,你总不能给客户展示1跟2吧 废话不多说,上代码 <avue-crud :data="data" :option="option" @row-save="rowSave" @row-update="rowUpdate" @row-del="rowDel" .
前端权限控制（三）：根据后台接口数据传递页面按钮权限-自定义指令-实现按钮级权限控制
zhufan2333的博客
08-12 2526
通过自定义指令来实现对按钮的控制：后端返回异步路由表中添加页面按钮权限字段，前端根据返回表中的权限来操作按钮。创建文件夹directives下index.js// 自定义指令BtnRole}})}}// 自定义指令，用来控制按钮权限// 当前按钮传递的值( v-BtnRole="'add'" 中的值)// 获取到存放在 store 中的权限数据// 如果不存在权限列表if (!} else {// 判断是否存在对应的按钮权限})// 不具备权限则删除（隐藏）.........
根据后端返回来的不同参数值显示不同的class
Front小思的博客
07-09 634
需求：根据后端返回的不同参数值来显示二维码不同的位置（居中、左上角、左下角、右上角、右下角） 后台返回给我的数字是 1、2、3、4、5，根据数字不同对应不同的class显示不同的位置，本来是用if写的，但是代码量太多，就研究了一下相比之下比较简单的方法。 说明：触发对应的图片来生成对应的海报来控制二维码的位置，如果回来的字段为空，则默认显示居中的状态（三维运算符）！ 如果可以使用v-for来遍历控制更好做，直接拿取数组的应对字段来控制 :class=“locStyle[imgList.locatio.
改变后端返回文案部分字体颜色
m0_46512929的博客
11-18 784
//把其他规则的三改成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...
vue.js根据获取到不同的数据显示不同的样式
热门推荐
6块腹肌的博客
11-11 2万+
项目需求： 项目需求如上图所示，要根据后台返回来的数据是否为天猫的数据，如果是天猫，返回来的值是1，然后页面就显示天猫的标志，如果返回来的值不是1，页面是显示淘的标志，这里介绍一下三目运算的实现方式。话不多少，直接上代码 // js代码： &lt;li class="item" v-for="item in itemData" :key="item"&gt; &lt;div clas...
前端与后端技术学习中的全栈探索
从描述部分可以看出，这位开发者（自称“阿里”）正处于Web开发技术栈的系统性学习阶段，专注于前端与后端核心技术的掌握。他明确列出了正在学习的技术：JavaScript、PHP、CSS、HTML 和 MySQL。这些技术共同构成了...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱技术的大仙

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值