js采用三目运算嵌套层数过多怎么优化

最新推荐文章于 2024-05-02 14:26:53 发布

南城夏季

最新推荐文章于 2024-05-02 14:26:53 发布

阅读量493

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_39818813/article/details/129622298

版权

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

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

当三目运算套了多层以后，可读性就没这么清晰了，这个时候采用对象的key-value就清晰很多了

修改====》

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