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 })
  }
})

猜你喜欢

转载自www.cnblogs.com/ygjzs/p/12045401.html