微信小程序wx:if控制元素显示隐藏

时间:2024-04-01 12:38:15
1.在 .js 页面中,定义consume(人均消费)

微信小程序wx:if控制元素显示隐藏

2.在 .wxml 页面中,使用wx:if="{{advantage.consume != ‘’}}"判断人均消费consume是否为空,若不为空,则该元素显示

微信小程序wx:if控制元素显示隐藏

<!-- 人均消费, 若商家不填写则不显示,wx:if做判断 -->
<view class='consume' wx:if="{{advantage.consume != ''}}">¥{{advantage.consume}}/人</view>
3.在 .wxss 页面中

微信小程序wx:if控制元素显示隐藏

4.consume不为空的效果图如下:

微信小程序wx:if控制元素显示隐藏

5.若consume为空,则该元素隐藏

微信小程序wx:if控制元素显示隐藏

6.consume为空的效果图如下:(整个view元素都隐藏)

微信小程序wx:if控制元素显示隐藏