Css Vue.js 变量中的动态类变量

<template>
<ul>
    <li v-for="item in items">
        <div :class="'outofstock.item_' + item.id ? 'bg-green-500' : 'bg-red-500' ">
            {{ item.name }}
        </div>
    </li>
</ul>
</template>

<script>   
    export default {
        data () {
            return {
                items: [{id: 1, name: 'monitor'}, {id: 2, name: 'printer'},{id: 3, name: 'scanner'],
                outofstock: {item_1: false, item_2: true, item_3: false}
            }
        }
    }
</script>

<template>
  <ul>
    <li v-for="item in items">
      <div :class="outofstock['item_' + item.id] ? 'bg-green-500' : 'bg-red-500' ">
        {{ item.name }}
      </div>
    </li>
  </ul>
</template>
<script>
  export default {
    data() {
      return {
        items: [{ id: 1, name: 'monitor'}, { id: 2, name: 'printer'}, { id: 3, name: 'scanner'}],
        outofstock: {
          item_1: false,
          item_2: true,
          item_3: false
        }
      }
    }
  }
</script>
<style>
  .bg-green-500 {
    background-color: green;
  }
  .bg-red-500 {
    background-color: red
  }
</style>

Css相关问答推荐

为什么盒影没有显示在我的Angular组件中？

相对于现有的转换3D应用关键帧动画

React呈现多个css文件

如何在容器查询体中重新定义：Root的CSS自定义属性值？

防止表格水平拉伸整个Blazor页面

下拉菜单未展开- bootstrap

靴子，为什么我不能让任何东西正确地排好队？

为什么 KaTeX 的彩虹文本只能在 Firefox 上运行？

使用CSS Grid是否可以跳过下一列？

动态覆盖 Vuetify 类

为什么每次加载新页面时我的 React 侧边栏都会抖动？

包含tailwind 中固定纵横比框的内容

直观地指示 IFrame 内的表单正在提交，但没有 javascript

reactjs - 容器中水平行的png图像

是否可以删除悬停在链接上时出现的手形光标？ (或将其设置为普通指针)

绝对位置和溢出：隐藏

边界半径应该剪辑内容吗？

在 css 中使用 FontAwesome 或 Glyphicons ：before

如何使内容出现在固定的 DIV 元素下方？

HTML5 和边框