怎么因为内容不同，而使其颜色改变

Question

我的食谱的状态一个是审核通过，一个是审核拒绝，一个是待审核，我将状态值显示在页面上，颜色都一样，我想改，不知道怎么改。
以下是我获得状态的代码：（但颜色都一样，要怎么写才能使颜色改变，即type=success,type=danger）

              <el-tag v-if="current === 'foods'" size="mini">{{ item.status }}</el-tag>

Answer 1

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

---

【您想要解决的问题】：您想要解决的问题是如何在Vue.js项目中使用Element UI组件库，根据食谱的不同审核状态（审核通过、审核拒绝、待审核），动态改变显示在页面上的状态标签的颜色。

【问题出现原因】：当前的代码片段只负责显示状态文本，但没有根据状态值来改变标签的颜色。Element UI的el-tag组件提供了type属性来定义标签的颜色，但是您的代码中没有使用这个属性。

【问题解决方案】：为了根据状态改变颜色，您可以使用三元运算符或者计算属性来动态设置el-tag组件的type属性。

【提供代码】：以下是修改后的代码示例，它根据状态值动态设置type属性：

<template>
  <div v-if="current === 'foods'">
    <el-tag v-for="item in items" :key="item.id" :type="getStatusType(item.status)" size="mini">
      {{ item.status }}
    </el-tag>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: 'foods',
      items: [
        // 假设的item数组，每个item都有status属性
      ]
    };
  },
  methods: {
    getStatusType(status) {
      switch (status) {
        case '审核通过':
          return 'success';
        case '审核拒绝':
          return 'danger';
        case '待审核':
          return 'warning';
        default:
          return 'info'; // 默认颜色
      }
    }
  }
};
</script>

【代码运行方式】：这段代码需要在Vue.js项目中运行，并且项目需要安装并配置好Element UI组件库。确保您的项目中已经引入了Element UI，并且<el-tag>组件是按照Element UI的文档正确使用的。

【代码预期运行结果】：

• 当item.status为"审核通过"时，标签颜色将变为绿色（success）。
• 当item.status为"审核拒绝"时，标签颜色将变为红色（danger）。
• 当item.status为"待审核"时，标签颜色将变为黄色（warning）。

【推荐相关链接】：

1. Element UI 官方文档
2. Vue.js 官方文档
3. 三元运算符在Vue.js中的使用
4. Element UI 标签组件的type属性