小程序开发总结日记（二）——三元运算符在微信小程序前端的具体应用（控制页面元素样式与显示）

三元运算符

使用语法：条件表达式 ? 表达式1 : 表达式2。

说明：问号前为条件表达式，判断结果为bool型，为 true 时执行表达式1，为 false 时执行表达式2。

作用近似于if..else..的逻辑运算。

在小程序前端 wxml 文件，虽然也能使用if..else..来进行条件渲染（ wx:if ），但结构却稍显复杂，相比来说在理解原理后，使用三元运算符不仅代码简单，逻辑上也更显清晰，代码风格更优雅。（还有什么能比只写一行代码就能搞定一件事情更轻松惬意？）

WXML条件渲染传送门：条件渲染 | 微信开放文档

具体案例

控制页面元素的显示

 

WXML 代码

<button type="{{isShow == true  ? 'default' : 'primary'}}" size="mini" bindtap="showOrHide">
    {{isShow == true  ? '全部收起' : '全部展开'}}
</button>

代码说明

当 isShow 为 true （元素显示），按钮样式为 default (白底黑字)，否则为 primary （绿底白字）。

当 isShow 为 true 时，文字显示“全部收起”，否则显示“全部展开”。

当 isShow 为 false 时，同理反推。

当用户点击按钮后，通过事件绑定 bindtap 在后台改变 isShow 的值（取反），即可实现页面显示状态的交替。

js 文件代码就不贴出来了，这里只提供思路，具体实现根据具体需求来写。