文章目录
一、条件渲染
wx:if
- 在小程序中,使用
wx:if="{{condition}}"
来判断是否需要渲染该代码块 - 也可以用
wx:elif
和wx:else
来添加一个 else 块
<view wx:if="{{flag > 10}}">hh</view>
<view wx:elif="{{flag == 10}}">xx</view>
<view wx:else>gg</view>
block wx:if
- 因为
wx:if
是一个控制属性,需要将它添加到一个标签上。 - 如果要一次性判断多个组件标签,可以使用一个
<block></block>
标签将多个组件包装起来,并在上边使用wx:if
控制属性。 <block/>
并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。
<block wx:if='{{ flag == 10 }}'>
<view>JavaScript</view>
<view>HTML</view>
<view>CSS</view>
</block>
hidden
- 使用
hidden="{{condition}}"
也能控制元素的显示与隐藏
<view hidden="{{ flag == 10}}">hidden</view>
为true隐藏,为false 显示
wx:if
的区别
hidden 和 - 被
wx:if
控制的区域,框架有一个局部渲染的过程,会根据控制条件的改变,动态创建或销毁对应的UI
结构。类似Vue
中的v-if
wx:if
是惰性的,如果在初始渲染条件为 false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。- 相比之下,hidden 就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。类似
Vue
中的v-show
- 总结:
wx:if
有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则wx:if
较好。
二、列表渲染
wx:for
- 在组件上使用
wx:for
控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。 - 默认数组的当前项的下标变量名默认为
index
,数组当前项的变量名默认为item
。
<view wx:for='{{ arr }}' wx:key='index'>
我是{{ item }} -- 索引是 {{ index }}
</view>
block wx:for
wx:for
可以用在<block></block>
标签上,以渲染一个包含多节点的结构块。
<block wx:for='{{ arr }}' wx:key='index'>
<view>值:{{item}}</view>
<view>索引:{{index}}</view>
</block>
指定索引和当前项的变量名
- 使用
wx:for-item
可以指定数组当前元素的变量名 - 使用
wx:for-index
可以指定数组当前下标的变量名
<view wx:for='{{ arr }}' wx:for-item='foritem' wx:for-index='forindex' wx:key='index'>
我是{{ foritem }} -- 索引是 {{ forindex }}
</view>
列表渲染中的 wx:key
1. wx:key
的作用说明
-
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如
<input/>
中的输入内容,<checkbox/>
的选中状态),需要使用wx:key
来指定列表中项目的唯一的标识符。 -
当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。
2. wx:key
的注意事项
key
值必须具有唯一性
,且不能动态改变key
的值必须是数字或字符串- 保留关键字
*this
代表在for
循环中的item
本身,它也可以充当key
值,但是有以下限制:需要item
本身是一个唯一的字符串或者数字。 - 如不提供
wx:key
,会报一个warning
, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。