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

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 有没有整苹果智能分拣线上图像数据
  • ¥20 有没有人会这个东西的
  • ¥15 cfx考虑调整“enforce system memory limit”参数的设置
  • ¥30 航迹分离,航迹增强,误差分析
  • ¥15 Chrome Manifest扩展引用Ajax-hook库拦截请求失败
  • ¥15 用Ros中的Topic通讯方式控制小乌龟的速度,走矩形;编写订阅器代码
  • ¥15 LLM accuracy检测
  • ¥15 pycharm添加远程解释器报错
  • ¥15 如何让子窗口鼠标滚动独立,不要传递消息给主窗口
  • ¥15 如何能达到用ping0.cc检测成这样?如图