[小程序]使用代码渲染页面

ViperL12024-01-21 9:39

一、条件渲染

1.单个控制

使用wx:if="{{条件}}" 来判断是否需要渲染这段代码，同时可以结合wx:elif 和wx:else来判断

复制代码

<view wx:if="{{type==0}}">0</view>
<view wx:elif="{{type==1}}">1</view>
<view wx:else>Out</view>

2.分组控制

使用**<block>**组件将内容包裹即可实现成组条件渲染，如：

复制代码

<block wx:if="{{type==0}}">
  <view>这个数是0</view>
  <view>这个不是目标值</view>
</block>
<block wx:else>
  <view>这个数不是0</view>
  <view>这个是目标值</view>
</block>

3.hidden属性

对单个控件使用hidden="{{条件}}"也可以控制其是否渲染（Ture为隐藏）

复制代码

<view hidden="{{type==0}}">符合条件</view>

4.wx:if和hidden的区别

wx:if是动态渲染和移除元素

hidden只是切换样式，建议需要频繁切换的情况使用

二、列表渲染

1.wx:for

复制代码

<view wx:for="{{List}}">
  索引是{{index}},内容是{{item}}
</view>

List:['Apple','Huawei','Xiaomi']

2.wx:key

用这个函数可以手动为渲染指定索引：

复制代码

<view wx:for="{{User}}" wx:key="id">
  用户名为{{item.name}}
</view>

    User:[
      {id:1,name:'小明'},
      {id:2,name:'Tom'},
      {id:3,name:'派大星'},
    ],