微信小程序 --wx:for循环 --条件渲染：wx:if 、hidden

一、 wx：for 循环

1. 循环数组：

　　1. 一般数组：[1, 2, 3, 4, 5, 'a', 'm']

　　2. 包含对象的数组：[ { key: value, ... }, { key: value, ...}]

　　注： 一般数组中可以使用wx:key=‘*this’， 复杂数组使用wx:key=‘对象中唯一的属性’

　　test = [{data: data1, id: 1}, {data: data2, id: 2},{data: data3, id: 3},]

　　list = [1, 2, 3, 4, 5, 'a', 'm']

<view>
  <view wx:for="{{test}}" wx:for-item='item' wx:for-index="index" wx:key='id'>
    {{item.name}}
    --
    {{item.age}}
  </view>

  <view wx:for="{{list}}" wx:for-item='item' wx:for-index="index" wx:key='*this'>
    {{item}}
  </view>
</view>

2. 循环对象：

　　对象数据：{key: value, ...}

　　注：wx:key等于一个对象中的属性，且该属性唯一即可

<!-- 对象循环 -->
<view>
  <view wx:for="{{shopping}}" wx:for-item='value' wx:for-index="key" wx:key='food'>
    {{key}}
    --
    {{value}}
  </view>
</view>

补充小知识：

　　block标签：占位标签，编写时使用block，在页面渲染时，block标签会自动被小程序移除，只保留其内部内容

<!-- block标签 -->
<view>
  <block wx:for="{{test}}" wx:key='id'>
    {{item.name}}
    ---
    {{item.age}}
  </block>
</view>

 

二、条件渲染：wx：if 、hidden

<!-- 1. 条件渲染-- wx:if 
  注：此条件渲染是将标签移除、创建来切换显示的。不适用需要反复切换的场景
-->
<view>
    <!-- 通过条件判断，来显示或隐藏标签 -->
    <view wx:if="{{data === 0}}">if: {{data}}</view>
    <view wx:elif="{{data === 1}}">elif: {{data}}</view>
    <view wx:else>else: {{data}}</view>
</view>

<!-- 2. 条件渲染：hidden 
  注：此属性是修改样式来切换显示, display:none。
  注2：设置了hidden属性，就不能再去设置css中display属性，有冲突
-->
<view>
    <!-- 直接在标签属性中添加hidden隐藏 -->
    <view hidden>hidden1</view>
    <!-- 在标签属性中使用hidden并赋值，判断boolear来隐藏或显示 -->
    <view hidden="{{false}}">hidden2</view>
</view>