计算属性或其他方式根据 Vue 中 v-for 中的值更改样式答案

【问题标题】：Computed property or other way to change style depending on value inside v-for in Vue计算属性或其他方式根据 Vue 中 v-for 中的值更改样式
【发布时间】：2021-02-10 01:06:14
【问题描述】：

我有这样的组件：

Vue.component('mcp-item', {
    template: '#mcp-item-template',
    data() {
        return {
            name: "MCP v2",
            version: "2.0",
            imei: 'XXXXXX XX XXXXXX X',
            relays: [
                { name : "REL1", state : 0 },
                { name : "REL2", state : 0 }
            ],
            inputs: [
                { name: "BP1", state: 0, color: "#CC0000" },
                { name: "BP2", state: 0, color: "#CC0000"  },
                { name: "BP3", state: 1, color: "#00CC00"  },
                { name: "BP4", state: 0, color: "#CC0000"  },
                { name: "BP5", state: 0, color: "#CC0000"  },
                { name: "BP6", state: 0, color: "#CC0000"  }
            ],
        }
    },
    methods: {
        reboot: function (event) { alert( this.imei) }
    }
})

在组件模板中的某处：

<table>
    <thead>
        <tr>
            <th>Input</th>
            <th>State</th>
        </tr>
    </thead>
    <tbody v-for="input in inputs" :key="input.name">
        <tr>
            <td :style="{ 'color': input.color}">{{input.name}}</td>
            <td>{{input.state}}</td>
        </tr>
    </tbody>
</table>

如您所见，现在我的对象中有专用的color 字段（这是data 中inputs 数组的元素）：

JS：

{ name: "BP1", state: 0, color: "#CC0000" }

HTML：

<td :style="{ 'color': input.color}">{{input.name}}</td>

我想去掉这个额外的属性，但我不知道如何在 v-for 循环中使用计算属性来为 state==0 设置红色，为 state== 设置绿色1.

【问题讨论】：

标签： vue.js v-for computed-properties

【解决方案1】：

也许计算属性是一种矫枉过正 - 简单的条件呢：

<td :style="{ 'red': input.state === 0, 'green': input.state === 1}">...// </td>

【讨论】：

感谢非常干净和最小的解决方案，但我选择了另一个，因为我可以设置更多的 CSS 属性。

【解决方案2】：

与其创建计算属性或将逻辑添加到模板中，不如创建一个方法getColor(state)，如下所示：

getColor(state) {
  let color = '';
  if (state === 0) {
    color = 'red';
  } else if (state === 1) {
    color = 'green';
  }
  return { color };
}

或者，如果唯一的值是 0 和 1，您可以将其缩短为：

getColor(state) {
  const color = state === 0 ? 'red' : 'green';
  return { color };
}

然后这样称呼它：

<td :style="getColor(input.state)">{{input.name}}</td>

【讨论】：

有经验的 Vue 用户会把这种方法放在哪里？在全局范围内，还是在组件中？
如果你只在这个组件中使用它，那就在里面添加它。如果您认为您将在多个组件中使用它，您可以创建一个外部“帮助程序”文件，该文件导出此方法并根据需要导入它。