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

一、条件渲染

1.单个控制

使用wx:if="{{条件}}" 来判断是否需要渲染这段代码,同时可以结合wx:elifwx: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:'派大星'},
    ],
相关推荐
DC_BLOG5 分钟前
Linux-GlusterFS进阶分布式卷
linux·运维·服务器·分布式
cookies_s_s39 分钟前
Linux--进程(进程虚拟地址空间、页表、进程控制、实现简易shell)
linux·运维·服务器·数据结构·c++·算法·哈希算法
zhouwu_linux1 小时前
MT7628基于原厂的SDK包, 修改ra1网卡的MAC方法。
linux·运维·macos
诶尔法Alpha2 小时前
Linux上使用dify构建RAG
linux·运维·服务器
熬夜苦读学习2 小时前
Linux文件系统
linux·运维·服务器·开发语言·后端
荔枝荷包蛋6663 小时前
【网络】高级IO——Reactor版TCP服务器
运维·服务器
GGGGGGGGGGGGGG.4 小时前
hapxory-ACL基础介绍及案例
运维·服务器·网络
黑牛先生4 小时前
【Linux】匿名管道
linux·运维·服务器
流星白龙4 小时前
【Linux】35.封装 UdpSocket(2)
linux·运维·windows
是码农没错了4 小时前
银河麒麟系统安装mysql5.7【亲测可行】
linux·运维·kylin