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

<div :style="{background: status===1?'#f00':'#000'}">sfddsa </div>
 status: 2