微信小程序--条件渲染&列表渲染

条件渲染：

wx:if 表示判断单个组件 block wx:if 表示判断块，也即判断多个组件

<view wx:if= "{
          
   {condition}}"> true </view>
//如果condition为真，则显示 true ，否则不显示

使用wx:elif和wx:else来添加一个else if 和else块：

<view wx:if= "{
          
   {length > 5}}"> 大于5</view>
<view wx:elif= "{
          
   {length > 2}}"> 大于2</view>
<view wx:else> 小于等于2</view>

block wx:if 用block标签将多个组件包装起来，并在上面使用wx:if,wx:elif,wx:else控制属性，即可一次性判断多个组件

<block wx:if= "{
          
   {true}}">
	<view>v1</view>
	<view>v2</view>
</block>
//这样即可一次性控制多个组件

需要注意的是block并不是一个组件，它仅仅是一个包装元素，它不会再页面上作出任何的渲染，只接受控制属性 示例：

//wxml
<button bindtap=change_color>变色 </button>
  <block wx:if="{
          
   {b==true}}">
    <view class=bg_green>123123123</view>
  </block>
  <block wx:elif="{
          
   {b==false}}">
    <view class=bg_blue>456456</view>
  </block>
  //js
  Page({
          
   
	data:{
          
   
		b:false
	},
	change_color: function () {
          
   
    var ab = this.data.b;
    this.setData({
          
    b: !ab })
  }
})
//wxss
.bg_green{
          
   
  height: 100rpx;
  background: green;
}
.bg_blue{
          
   
  height: 100rpx;
  background: blue;
}

效果显示：

列表渲染

wx:for 列表渲染单个组件 block wx:for 列表渲染对个组件 wx:key 指定唯一标识符

wx:for 在组件上使用wx:for控制属性绑定一个数组，即可使用该数组中各项的数据重复渲染该组件；数组当前项的下标变量名默认为index，当前项的变量名默认为item

//wxml
<view wx:for= "{
          
   {array}}">
	{
          
   {
          
   index}}:{
          
   {
          
   item.msg}}
</view>
//js
Page({
          
   
	data:{
          
   
		array:[{
          
   id:1,msg:the first},{
          
   id:2,msg:the second}]
	}
})

<view wx:for= "{
          
   {array}}" wx:for-index= "idx" wx:for-item= "itemName">
	{
          
   {
          
   idx}}:{
          
   {
          
   itemName.msg}}
</view>

block wx:for 如果想渲染一个包括多节点的结构块，这时wx：for需要应用在block标签上

<block wx:for="{
          
   {[1,2,3]}}">
	<view> {
          
   {
          
   index}}:</view>
	<view> {
          
   {
          
   item}} </view>
</block>

wx:key 如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态，则需要wx:key来指定列表中项目的位移标识符

//wxml
<switch wx:for="{
          
   {objArray}}" wx:key="unq">
    {
          
   {
          
   item.id}}+{
          
   {
          
   item.unq}}
</switch>
//js
Page({
          
   
  data: {
          
   
    objArray:[
      {
          
   id:  5, unq: u5},
      {
          
    id: 4, unq: u4 },
      {
          
    id: 3, unq: u3 },
      {
          
    id: 2, unq: u2 },
      {
          
    id: 1, unq: u1 },
      {
          
    id: 0, unq: u0 }
    ]
  }
})