计算属性或其他方式根据 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
字段(这是data
中inputs
数组的元素):
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 ;
或者,如果唯一的值是 0
和 1
,您可以将其缩短为:
getColor(state)
const color = state === 0 ? 'red' : 'green';
return color ;
然后这样称呼它:
<td :style="getColor(input.state)">input.name</td>
【讨论】:
有经验的 Vue 用户会把这种方法放在哪里?在全局范围内,还是在组件中? 如果你只在这个组件中使用它,那就在里面添加它。如果您认为您将在多个组件中使用它,您可以创建一个外部“帮助程序”文件,该文件导出此方法并根据需要导入它。以上是关于计算属性或其他方式根据 Vue 中 v-for 中的值更改样式的主要内容,如果未能解决你的问题,请参考以下文章