三目运算符的多层嵌套

三目运算符的基础用法是二选一,当我们想多选一时就可以利用三目运算符的多层嵌套来完成(可以替代if多层判断)

三目运算符的结构:
根据不同的条件,执行不同的操作/返回不同的值

嵌套语法: 条件1?值1或操作1: //如果满足条件1,就返回值1或执行操作1条件2?值2或操作2: //否则,如果满足条件2,就返回值2或执行操作2以此类推进行多条件嵌套
例子:

当时进行先处理数据后渲染
这样做有个弊端,就是当你拿本对象直接当做入参时,对象里会多出来两个入参(可能会影响响应结果,当然也可能不影响)

1
2
3
4
5
6
7
8
9
10
11
12
res.data.data.map((item, index) => {
if (item.type == 0) {
item.temp1 = "站点";
item.temp2 = "全站";
} else if (item.type == 1) {
item.temp1 = "用户";
item.temp2 = item.author;
} else {
item.temp1 = "模块";
item.temp2 = item.bk;
}
});

我们也可以在渲染数据时利用三木云算符进行判断

1
2
{{scope.row.type==0?'全站':scope.row.type==1?scope.row.author:scope.row.type==2?scope.row.bk:'数据为空'}}
{{scope.row.type==0?'站点':scope.row.type==1?'用户':scope.row.type==2?'板块':'数据为空'}}

三目运算符的多层嵌套
http://ultracode.cn/2021/09/22/NewJs/三目运算符的多层嵌套/
作者
Win
发布于
2021年9月22日
许可协议