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

Posted

技术标签:

【中文标题】计算属性或其他方式根据 Vue 中 v-for 中的值更改样式【英文标题】:Computed property or other way to change style depending on value inside v-for in Vue 【发布时间】: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 字段(这是datainputs 数组的元素):

JS:

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

html

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

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

【问题讨论】:

【参考方案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 ;

或者,如果唯一的值是 01,您可以将其缩短为:

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

然后这样称呼它:

&lt;td :style="getColor(input.state)"&gt;input.name&lt;/td&gt;

【讨论】:

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

以上是关于计算属性或其他方式根据 Vue 中 v-for 中的值更改样式的主要内容,如果未能解决你的问题,请参考以下文章

使用计算或方法获取 v-for 中的索引

Vue方向:v-for循环中的key属性

编写 Vue v-for 循环更优雅的 7 种方式

编写 Vue v-for 循环更优雅的 7 种方式

编写 Vue v-for 循环更优雅的 7 种方式

编写 Vue v-for 循环更优雅的 7 种方式