前端三元判断

原创已于 2022-09-02 09:39:25 修改 · 1.5k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #javascript #大数据

收录于

于 2020-06-08 10:19:16 首次发布

vue 专栏收录该内容

12 篇文章

订阅专栏

本文探讨了前端开发中三元判断的常见使用，指出在处理复杂条件时，定义方法可能比使用三元判断更为简洁。通过实例展示三元判断的用法，并建议在条件多时考虑更优的代码组织方式。

三元判断是用的挺多的一项技能，之前项目需求中，有用到过三元判断

直接上案例

//三元判断使用哪个样式
:class="item.state=='条件1'?'样式1' : item.state=='条件2'?'样式2':item.state=='条件3'?'样式3':item.state=='条件4'?'样式4': item.state=='条件5'?'样式5': item.state=='条件6'?'样式6':item.state=='条件7'?'样式7':item.state=='条件8'?'样式8':item.state=='条件9'?'样式9': item.state=='条件10'?'样式10':''"

如果条件很多的情况下建议定义方法代替三元会更简洁例如

//视图 
{{refundState(item)}}
//方法
refundState(item) {
	switch (item) {
		case 1:
			return "等待商家同意退货";
		case 2:
			return "卖家已同意";
		case 3:
			return "卖家拒绝退货申请";
		case 4:
			return "商品已发出，等待商家收货";
		case 5:
			return "卖家拒绝退款";
		case 6:
			return "退款关闭";
		case 7:
			return "商家已同意退货申请，请尽快发货";
		case 8:
			return "退款成功";
		default:"";
	}
},