1.if 和 else，以及 hidden 渲染

index.wxml（页面代码）：

1 <view wx:if="{{flag}}">
2     if渲染
3 </view>
4 <view wx:else>
5     if-else渲染
6 </view>
7 <view hidden="{{flag}}">
8     hidden
9 </view>

index.js（页面js代码）：

1 Page({
2       data: {
3         flag:true
4     }
5 }）

两者区别在于：if渲染是通过生成和没有生成代码，来达到显示和隐藏的效果，但是hidden渲染是通过控制样式 display：none 来进达到隐藏和显示的效果

注意：wx:if 也是支持在表达式里面放三元运算和表达式：如wx:if = “{{ flag ? true : false }}”

2.block

index.wxml（页面代码）：

1 <block wx:if="{{flag}}">
2     <view>组件</view>
3 </block>

 此时 block 并没有被渲染，这样子不会影响布局

3.for列表渲染

index.js（页面js代码）：

 1 page({
 2     data: {
 3         arr:[1,2,3],
 4         arrobj:[
 5             {
 6                 id:1,
 7                 name:"林"
 8             },
 9             {
10                 id:2,
11                 name:"王"
12             }
13         ]
14     },
15 })

index.wxml（页面代码）：

<view wx:for="{{arr}}">
 {{index}}---{{item}}
</view>

默认情况下索引是index，遍历对象是item

 当然也可以自定义

index.wxml（页面代码）：

1 <view wx:for="{{arrobj}}" wx:for-index="idx" wx:for-item="data">
2  {{idx}}---{{data.name}}
3 </view>

 如果循环列表是动态的，我们应当为他绑定唯一标识key

index.wxml（页面代码）：

1 <view wx:for="{{arrobj}}" wx:key="id">
2  {{index}}---{{item.name}}
3 </view>

 

标签：index,name,wxml,渲染,微信,代码,程序开发,组件,页面
来源： https://www.cnblogs.com/lyq888/p/16273086.html