「已注销」 2022-07-01 15:54 采纳率: 71.1%
浏览 256
已结题

Vue根据状态改变背景色

Vue根据状态改变背景色,当状态为正常时背景色为青色,状态为库存不足时背景色为红色,当油品为柴油时背景色为蓝色


<ul class="conert-list">
                  <li v-for="item in initData2" :key="item.code">
                    <h3 class="shang">{{ item.name }}</h3>
                    <ul class="conert-list-child">
                      <li v-for="c in item.child" :key="c.tank_no">
                        <div :class="{ 'waterCircle-circle':1, 'waterCircle-circle-lower': c.is_waring*1}">
                          <div :style="{ height: c.vol / c.tankvol * 100 + '%'}">
                          </div>
                        </div>
                        <article>
                          <div v-if="c.is_warning == 1">
                            状态:正常
                          </div>
                          <div v-if="c.is_warning == 0">
                            <a>状态:<span style="color:#cb4757">库存不足</span></a>
                          </div>
                          编号:{{ c.code }}#<br />
                          油品:{{ c.oil_name }}<br />
                          罐容:{{ c.tankvol }}L<br />
                          库存:{{ c.vol }}L<br />
                        </article>
                      </li>
                    </ul>
                  </li>
                </ul>

img

  • 写回答

1条回答 默认 最新

  • 你好!机器人 2022-07-01 15:58
    关注
    <div :style="{background: status===1?'#f00':'#000'}">sfddsa </div>
     status: 2
    
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 7月9日
  • 已采纳回答 7月1日
  • 创建了问题 7月1日

悬赏问题

  • ¥15 用土力学知识进行土坡稳定性分析与挡土墙设计
  • ¥70 PlayWright在Java上连接CDP关联本地Chrome启动失败,貌似是Windows端口转发问题
  • ¥15 帮我写一个c++工程
  • ¥30 Eclipse官网打不开,官网首页进不去,显示无法访问此页面,求解决方法
  • ¥15 关于smbclient 库的使用
  • ¥15 微信小程序协议怎么写
  • ¥15 c语言怎么用printf(“\b \b”)与getch()实现黑框里写入与删除?
  • ¥20 怎么用dlib库的算法识别小麦病虫害
  • ¥15 华为ensp模拟器中S5700交换机在配置过程中老是反复重启
  • ¥15 uniapp uview http 如何实现统一的请求异常信息提示?