js 三元表达式 当要判断的条件有3种情况时用法详解(例子:播放器3种循环)

1.一般用法时,只存在两种判断条件:表达式 expr ? ‘res1’ : ‘res2’

在 expr求值为 TRUE 时的值为 res,在 expr1 求值为 FALSE 时的值为 res2。

2.如果当 expr为3个结果时可以用下面的方法:这样可以大量的精简代码

expr ? ‘res1’ :(expr1 ? ‘res2′:’res3’)

例子1: state.repeat_state 有三个值要判断(repeat_state: 0, //是否循环播放|0循环,1单曲,2,随机)

changeRepeat(state) {
state.repeat_state == 0 ? state.repeat_state = 1 : (state.repeat_state == 1 ? state.repeat_state =2 : state.repeat_state =0)
			// if (state.repeat_state == 0) {
			// 	state.repeat_state = 1
			// 	return
			// }
			// if (state.repeat_state == 1) {
			// 	state.repeat_state = 2
			// 	return
			// }
			// if (state.repeat_state == 2) {
			// 	state.repeat_state = 0
			// 	return
			// }
		},

例子2:vue中根据三个判断条件,分别绑定3个不同的class(实例为播放器的循环播放、单曲播放、随机播放3中状态的字体图标class)

repeat_state 为0时绑定 ri-repeat-2-fill

repeat_state 为1时绑定 ri-repeat-one-fill

repeat_state 为2时绑定 ri-shuffle-line

<view @click="repeatMod()"
:class="[repeat_state=='0'?'ri-repeat-2-fill':(repeat_state=='1'?'ri-repeat-one-fill':'ri-shuffle-line')]"
>
</view>
Posted in JS

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注