css采用三木运算嵌套层数过多怎么优化

原创已于 2023-03-17 15:31:38 修改 · 216 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2023-03-17 15:27:43 首次发布

文章讨论了在CSS中使用三木运算符进行条件判断时嵌套过多的问题，并提出了一种优化方案，即通过对象字面量来简化代码，提高可读性和效率。示例展示了如何将复杂的三木运算嵌套转换为简洁的对象映射，以根据`item.importance`的值动态设置颜色。

css采用三木运算嵌套层数过多，优化方案

 <text :style="item.importance == 4 ? {color: '#fa3534'} : (item.importance == 3 ? {color: '#ff9900'} : (item.importance == 2 ? {color: '#D061FF'} : {color: '#000000'}))">
    {{ formatImportance(item.importance) }}
</text>

修改====》

//修改后
 <text :style="({
				4:{color: '#fa3534'},
				3:{color: '#ff9900'},
				2:{color: '#D061FF'}
	         }[item.importance]|| {color: '#000000'}).color">
	          {{ formatImportance(item.importance) }}
</text>