微信小程序开发---条件渲染和列表渲染

目录

一、条件渲染

(1)基本使用

(2)block

(3)hidden

二、列表渲染

(1)基本使用

(2)手动指定索引和当前项的变量名

(3)wx:key的使用


一、条件渲染

(1)基本使用

条件渲染就相当于if语句,这也不需要多说了,终点是它的用法。

javascript 复制代码
<view wx:if="{{count===1}}">1</view>
<view wx:elif="{{count===2}}">2</view>
<view wx:else>3</view>

(2)block

如果想要一次性控制多个组件的展示和隐藏,可以使用block标签将多个组件包装起来。

javascript 复制代码
<block wx:if="true">
  <view>1</view>
  <view>2</view>
</block>

注意block并不是一个组件其实,只是一个包裹性的容器,不会在页面中做任何渲染

(3)hidden

在小程序中,直接使用hidden="true"可以控制元素的显示和隐藏

javascript 复制代码
<view hidden="{{msg}}">11s1</view>

wx:if和hidden的区别

(1)运行方式不同。

wx:if以动态创建和移除元素的方式控制元素的隐藏和显示

hidden以切换样式的方式控制(display:none/block)

(2)使用建议

频繁切换建议使用hidden

控制条件复杂时使用if

二、列表渲染

(1)基本使用

javascript 复制代码
<view wx:for="{{array}}">
 索引={{index}}
 值={{item}}
</view>

注意index和item是写死的,改成别的则无法显示

(2)手动指定索引和当前项的变量名

javascript 复制代码
<view wx:for="{{array}}" wx:for-index="id" wx:for-item="val">
  {{id}}----{{val}}
</view>

(3)wx:key的使用

类似于vue列表渲染的:key,小程序渲染在实现列表渲染时,也建议为渲染出来的列表项指定唯一的key

javascript 复制代码
arr:[
      {id:11,name:'大明'},
      {id:22,name:'二明'},
      {id:33,name:'三明'}
    ]

<view wx:for="{{arr}}" wx:key="id">{{item.name}}</view>
相关推荐
奶糖 肥晨7 小时前
微信小程序隐藏滚动条多种方法教程
微信小程序·小程序·notepad++
计算机学姐7 小时前
基于微信小程序的高校班务管理系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
sen_shan7 小时前
《微信小程序》第三章:Request封装
微信小程序·小程序
sen_shan7 小时前
《微信小程序》第一章:开发前准备与配置
微信小程序·小程序
游戏开发爱好者88 小时前
HTTPS 内容抓取实战 能抓到什么、怎么抓、不可解密时如何定位(面向开发与 iOS 真机排查)
android·网络协议·ios·小程序·https·uni-app·iphone
stark张宇13 小时前
超越 Hello World:深入小程序 Hybrid 初衷、安全配置与上线全链路
nginx·微信小程序·php
菜鸟una15 小时前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
2501_9151063217 小时前
iOS 混淆与 IPA 加固全流程,多工具组合实现无源码混淆、源码防护与可审计流水线(iOS 混淆|IPA 加固|无源码加固|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者817 小时前
用多工具组合把 iOS 混淆做成可复用的工程能力(iOS混淆 IPA加固 无源码混淆 Ipa Guard)
android·ios·小程序·https·uni-app·iphone·webview
lypzcgf18 小时前
商城小程序数据库表结构文档
数据库·小程序·电商