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

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方法动态计算的。在组件初始化时，数组中的第一个状态会被设置为成功，并且其背景颜色会显示为浅绿色。

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