wx:if  和  hidden 的使用

1.在js中定义数据

Page({ 
  data:{ 
   type:1,
   flag: false
  }, 
})

2.在wxml中使用wx:if 和 hidden， block用于包装组件(不会渲染为任何标签)

 <!-- 条件渲染 -->
 <view wx:if="{{type === 1}}">男</view>
 <view wx:elif="{{type === 2}}">女</view>
 <view wx:else>保密</view>
 <!-- 结合block -->
 <block wx:if="{{false}}">
 <view>1</view>
 <view>2</view>
 </block>
<!-- hidden -->
 <view hidden="{{flag}}">123</view>

3.查看效果

wx:if  和  hidden 的区别

	运行方式	使用建议
wx:if	以动态方式创建和移除	控制条件复杂
hidden	切换样式(block,none)	频繁切换

 wx:for  的使用

1.在js中定义一个数组

Page({ 
  data:{ 
    arr:["小白","小满","小元","小李"],
  }
})

2.在wxml中通过view调用

 <!-- wx:for  索引默认为index   索引项为item -->
 <view wx:for="{{arr}}" wx:for-index="idx" wx:for-item="it">
 索引是:{{idx}} 索引项是:{{it}}
 </view>

3.查看效果

   但是我们这样写的话在控制台会报一个警告，需要我们给出key

 

   给出对应的key后改警告就会消失