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

Do vis~

已于 2023-03-17 15:31:38 修改

阅读量203

点赞数

CC 4.0 BY-SA版权

文章标签： css 前端

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

本文链接：https://blog.youkuaiyun.com/gittt/article/details/129621722

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>