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

一、条件渲染

        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:'派大星'},
    ],

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/336917.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

linux网络协议栈2--网络包接收发送流程

上文我们讲了报文格式&#xff0c;应该对数据传输格式有了一定了解&#xff0c;这篇文章主要讲述的是网络包接收和发送的流程&#xff0c;主要是大方面来介绍。 网络包接收流程 当网络数据帧通过网络传输到达网卡时&#xff0c;网卡会将网络数据帧通过DMA的方式放到环形缓冲区…

nginx日志分割

日志切割是线上常见的操作&#xff0c;能够控制单个日志文件的大小&#xff0c;便于对日志进行管理 给nginx主进程发送一个重新打开的信号&#xff0c;让nginx重新生成新的日志文件 nginx -s reopen 这个命令等同于kill -USR1 cat nginx.pid 切割日志文件shell命令 #!/bin/bas…

Flink处理函数(3)—— 窗口处理函数

窗口处理函数包括&#xff1a;ProcessWindowFunction 和 ProcessAllWindowFunction 基础用法 stream.keyBy( t -> t.f0 ).window( TumblingEventTimeWindows.of(Time.seconds(10)) ).process(new MyProcessWindowFunction()) 这里的MyProcessWindowFunction就是ProcessWi…

rk1126, 实现 yolov8 目标检测

基于 RKNN 1126 实现 yolov8 目标检测 Ⓜ️ RKNN 模型转换 ONNX yolo export model./weights/yolov8s.pt formatonnx导出 RKNN 这里选择输出 concat 输入两个节点 onnx::Concat_425 和 onnx::Concat_426 from rknn.api import RKNNONNX_MODEL ./weights/yolov8s.onnxRKNN_MOD…

C语言练习day8

变种水仙花 变种水仙花_牛客题霸_牛客网 题目&#xff1a; 思路&#xff1a;我们拿到题目的第一步可以先看一看题目给的例子&#xff0c;1461这个数被从中间拆成了两部分&#xff1a;1和461&#xff0c;14和61&#xff0c;146和1&#xff0c;不知道看到这大家有没有觉得很熟…

Spring Boot整合Redis的高效数据缓存实践

引言 在现代Web应用开发中&#xff0c;数据缓存是提高系统性能和响应速度的关键。Redis作为一种高性能的缓存和数据存储解决方案&#xff0c;被广泛应用于各种场景。本文将研究如何使用Spring Boot整合Redis&#xff0c;通过这个强大的缓存工具提高应用的性能和可伸缩性。 整合…

对#多种编程语言 性能的研究和思考 go/c++/rust java js ruby python

对#多种编程语言 性能的研究和思考 打算学习一下rust 借着这个契机 简单的写了计算圆周率代码的各种语言的版本 比较了一下性能 只比拼单线程简单计算能力 计算十亿次循环 不考虑多线程 go/c/rust java js ruby python 耗时秒数 1:1:1:22:3:250:450 注&#xff1a;能启用则启…

Python 自动化测试:数据驱动

软件质量。这种测试&#xff0c;在功能测试中非常耗费人力物力&#xff0c;但是在自动化中&#xff0c;却比较好实现&#xff0c;只要实现了测试操作步骤&#xff0c;然后将多组测试数据以数据驱动的形式注入&#xff0c;就可以实现了。 前面文章学习了参数化&#xff0c;当数…

【机组】算术逻辑单元带进位运算实验的解密与实战

​&#x1f308;个人主页&#xff1a;Sarapines Programmer&#x1f525; 系列专栏&#xff1a;《机组 | 模块单元实验》⏰诗赋清音&#xff1a;云生高巅梦远游&#xff0c; 星光点缀碧海愁。 山川深邃情难晤&#xff0c; 剑气凌云志自修。 ​ 目录 &#x1f33a;一、 实验目…

MySQL锁机制与优化实践

数据库乐观和悲观锁 乐观锁 比如在数据库中设置一个版本字段&#xff0c;每操作一次&#xff0c;都会将这行对应的版本号1&#xff0c;这样下次更新都会拿到最新的版本号更新&#xff0c;如果一个事务拿到了版本号但是更新前其他人已经将版本号升级了&#xff0c;那么当前事务…

消除噪音:Chain-of-Note (CoN) 强大的方法为您的 RAG 管道提供强大动力

论文地址&#xff1a;https://arxiv.org/abs/2311.09210 英文原文地址&#xff1a;https://praveengovindaraj.com/cutting-through-the-noise-chain-of-notes-con-robust-approach-to-super-power-your-rag-pipelines-0df5f1ce7952 在快速发展的人工智能和机器学习领域&#x…

HackTheBox - Medium - Linux - BackendTwo

BackendTwo BackendTwo在脆弱的web api上通过任意文件读取、热重载的uvicorn从而访问目标&#xff0c;之后再通过猜单词小游戏获得root 外部信息收集 端口扫描 循例nmap Web枚举 feroxbuster扫目录 /api/v1列举了两个节点 /api/v1/user/1 扫user可以继续发现login和singup 注…

(已解决)阿里云ECS服务器8080端口无法访问

最近购买阿里云服务器项目部署的时候&#xff0c;配置开放了阿里云8080端口&#xff0c;却一直访问不了&#xff0c;看了阿里云社区几个帖子&#xff0c;都没有找到正确的解决方法。 然后CSDN看了几个帖子&#xff0c;方法也不对。 索性&#xff0c;我很早之前就使用阿里云EC…

【JSON2WEB】01 WEB管理信息系统架构设计

WEB管理信息系统分三层设计&#xff0c;分别为DataBase数据库、REST2SQL后端、JSON2WEB前端&#xff0c;三层都可以单独部署。 1 DataBase数据库 数据库根据需要选型即可&#xff0c;不需要自己设计开发&#xff0c;一般管理信息系统都选关系数据库&#xff0c;比如Oracle、…

二维旋转公式推导+旋转椭圆的公式推导

二维旋转公式推导+旋转椭圆的公式推导 二维旋转公式推导旋转椭圆的公式推导二维旋转公式推导 x , y x,y x,y表示二维坐标系中原坐标点, x ′ , y ′ x,y x′,y′表示逆时针旋转 β \beta β之后的坐标点: x ′ = x cos ⁡ ( β ) − y sin ⁡ ( β ) y ′ = y cos ⁡ ( β )…

(循环依赖问题)学习spring的第九天

Bean实例的属性填充 Spring在属性注入时 , 分为如下几种情况 : 注入单向对象引用 : 如usersevice里注入userdao , userdao里没有注入其他属性 注入双向对象引用 : 如usersevice里注入userdao , userdao也注入usersevice属性 二 . 着重看循环依赖问题 (搞清原理即可) 问题提出…

RS-485通讯

RS-485通讯协议简介 与CAN类似&#xff0c;RS-485是一种工业控制环境中常用的通讯协议&#xff0c;它具有抗干扰能力强、传输距离远的特点。RS-485通讯协议由RS-232协议改进而来&#xff0c;协议层不变&#xff0c;只是改进了物理层&#xff0c;因而保留了串口通讯协议应用简单…

TypeScript教程(一)在vscode中的配置TypeScript环境

TypeScript教程&#xff08;一&#xff09;在vscode中的配置TypeScript环境 文章目录 TypeScript教程&#xff08;一&#xff09;在vscode中的配置TypeScript环境一、前言二、具体步骤1、Node.js安装2、TypeScript安装3、helloworld 一、前言 未来的开发者们请上座&#xff0c…

ChatQA实现策略:兼看大模型进行时序事件挖掘的思路

一、ChatQA&#xff1a;两阶段指令微调的对话思路 《ChatQA: Building GPT-4 Level Conversational QA Models》(https://arxiv.org/pdf/2401.10225.pdf)提出了一个两阶段的对话问答思路。 1、指令微调 微调包含两个阶段&#xff0c;Supervised Fine-tuning和Context-Enhanc…

Cortex-M3/M4内核NVIC及HAL库函数详解(2):HAL库中断底层函数实现

0 工具准备 Keil uVision5 Cortex M3权威指南&#xff08;中文&#xff09; Cortex M3与M4权威指南 stm32f407的HAL库工程 STM32F4xx中文参考手册 1 HAL库中断底层函数实现 打开stm32f407的HAL库工程&#xff0c;可以在CMSIS->Include->core_cm4.h内找到有关NVIC寄存器设…
最新文章