前端——根据状态的不同，显示不同的背景颜色

CSDN1024活动

---

前言

提示：这里可以添加本文要记录的大概内容：

---

前言

提示：这里可以添加本文要记录的大概内容：

实现效果：

---

提示：以下是本篇文章正文内容，下面案例可供参考

根据给定的状态值显示一个带有特定背景颜色的文本标签

注意下面的数字在数据库中是什么类型（int）

<template>
  <div>
    <span class="state" :style="{ backgroundColor: getStateBackgroundColor(item.state) }">
      {{ item.stateName }}
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      state: [
        { state: 1, stateName: '成功' },
        { state: 2, stateName: '失败' },
        { state: 3, stateName: '警告' },
      ],
    };
  },
  methods: {
    getStateBackgroundColor(state) {
      switch (state) {
        case 1:       
         return '#90EE90'; // 浅绿色，代表成功
        case 2:
          return '#FF6347'; // 深红色，代表失败
        default:
          return '#FFA07A'; // 橙色，代表警告
      }
    },
  },
  mounted() {
    // 在组件挂载后更改第一个元素的状态
    this.$set(this.state[0], 'state', 1);
  },
};
</script>

这段代码是一个Vue.js组件，用于展示不同状态的信息，并根据状态的不同显示不同的背景颜色。下面是逐行的解释：

HTML模板部分

<template>
  <div>
    <span class="state" :style="{ backgroundColor: getStateBackgroundColor(item.state) }">
      {{ item.stateName }}
    </span>
  </div>
</template>

• <template> 标签定义了组件的HTML结构。
• <div> 包含了一个 <span> 元素，用于显示状态名称。
• :style="{ backgroundColor: getStateBackgroundColor(item.state) }" 动态绑定样式，这里的 getStateBackgroundColor(item.state) 是一个方法调用，它会返回一个背景颜色字符串。
• {{ item.stateName }} 显示状态的名称。

JavaScript部分

<script>
export default {
  data() {
    return {
      state: [
        { state: 1, stateName: '成功' },
        { state: 2, stateName: '失败' },
        { state: 3, stateName: '警告' },
      ],
    };
  },
  methods: {
    getStateBackgroundColor(state) {
      switch (state) {
        case 1:
          return '#90EE90'; // 浅绿色，代表成功
        case 2:
          return '#FF6347'; // 深红色，代表失败
        default:
          return '#FFA07A'; // 橙色，代表警告
      }
    },
  },
  mounted() {
    // 在组件挂载后更改第一个元素的状态
    this.$set(this.state[0], 'state', '1');
  },
};
</script>

• export default 导出一个Vue组件对象。
• data() 返回一个包含state数组的对象。这个数组包含了不同的状态信息，包括状态码（state）和对应的中文名称（stateName）。
• methods 定义了组件的方法，其中getStateBackgroundColor方法接收一个状态码作为参数，并根据状态码返回相应的背景颜色。
• mounted() 是Vue的生命周期钩子函数之一，当组件被挂载到DOM后执行。这里设置数组的第一个元素的状态为成功。

注意：

主要差异

1. 状态值的数据类型：
   • 状态值是字符串类型（'1', '2'）。
   • 状态值是数字类型（1, 2）。

影响

• 数据类型的变化可能导致在某些情况下出现问题。如果组件中的状态值是以字符串形式存储的（如'1'），而方法期望的是数字类型（如1），那么在进行比较时可能会导致不正确的结果。

这是因为JavaScript中的switch语句会进行严格比较，即===，这会检查类型和值都相同。

如何处理

• 如果状态值是以字符串形式存储的（如'1'），则应该使用原始版本中的case '1': 和 case '2':。
• 如果状态值是以数字形式存储的（如1），则应该使用修改后的版本中的case 1: 和 case 2:。

示例

假设data中状态值是以字符串形式存储的，如下所示：

data() {
  return {
    state: [
      { state: '1', stateName: '成功' },
      { state: '2', stateName: '失败' },
      { state: '3', stateName: '警告' },
    ],
  };
}

在这种情况下，应该使用的getStateBackgroundColor方法：

methods: {
  getStateBackgroundColor(state) {
    switch (state) {
      case '1':
        return '#90EE90'; // 浅绿色，代表成功
      case '2':
        return '#FF6347'; // 深红色，代表失败
      default:
        return '#FFA07A'; // 橙色，代表警告
    }
  },
}

mounted钩子函数

mounted() {
  // 在组件挂载后更改第一个元素的状态
  this.$set(this.state[0], 'state', '1'); // 注意这里使用数字1而不是字符串'1'
}

总结

这个Vue组件的功能是展示一个状态列表，每个状态都有一个中文名称和一个背景颜色。背景颜色是通过getStateBackgroundColor方法动态计算的。在组件初始化时，数组中的第一个状态会被设置为成功，并且其背景颜色会显示为浅绿色。

同时注意数据库中的状态值是什么类型的