wx-show與！show

切換的表示

<!--index.wxml-->
<view class="container">
  <view class="item">
    <view class="title" bindtap="toggle">
      <text>切換面板展示</text>
    </view>
    <!-- block 只是控制屬性(wx:)的載體，頁面渲染過程中沒有實際意義 -->
    <!--<block wx:if="{{ show }}">
      <view class="content">
        <text>
          這里是內容。。。
          這里是內容。。。
          這里是內容。。。
        </text>
      </view>
      <view class="content">
        <text>
          這里是內容。。。
          這里是內容。。。
          這里是內容。。。
        </text>
      </view>
    </block>-->


    <!-- hidden 標簽任然會工作，只是不顯示在界面上 -->
    <view class="content" hidden="{{ !show }}">
      <text>
        這里是內容。。。
        這里是內容。。。
        這里是內容。。。
      </text>
    </view>
    <!-- wx:if當條件為假的時候是不渲染（這個標簽不工作） -->
    <view class="content" wx:if="{{ show }}">
      <text>
        這里是內容。。。
        這里是內容。。。
        這里是內容。。。
      </text>
    </view>
  </view>
</view>

.item {
  border: 1px solid #ccc;
  border-radius: 3px;
  width: 200px;
}

.item .title {
  border-bottom: 1px solid #ccc;
  background-color: #f0f0f0;
  padding: 10px;
}

.item .content {
  padding: 10px;
  font-size: 16px;
}

//index.js
//獲取應用實例
var app = getApp()
Page({
  data: {
    show: false
  },
  //事件處理函數
  toggle: function () {
    this.setData({ show: !this.data.show })
  }
})