微信小程序知识点整理(三)——条件渲染与列表渲染

一、条件渲染

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 显示

hidden 和 wx:if 的区别

被 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 的注意事项