小程序:条件渲染

来自CloudWiki
跳转至: 导航搜索

背景

选择性显示某些组件

JS代码

 data: {
      a:"2020LPL夏季赛季后赛观赛指南",
      b:1,
      c:2,
      flag:false,
  },

WXML

 <text wx:if="{{flag}}" class="post-date">{{date}}</text>

注:if后面设置空字符串wx:if="{{}}" ,也能达到类似效果。

效果

Wexin21051901.pngWexin21051902.png

二选一显示

方法一

       <view class="post-author-date">
            <image wx:if="{{flag}}"class="post-author" src="{{avatar}}"></image>
            <text wx:if="{{!flag}}" class="post-date">{{date}}</text>
        </view>

方法二

     <view class="post-author-date">
            <image wx:if="{{flag}}"class="post-author" src="{{avatar}}"></image>
            <text wx:else class="post-date">{{date}}</text>
        </view>