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

news2024/10/7 18:23:22

一、条件渲染

        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.coloradmin.cn/o/1400024.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数字IC后端设计实现 | PR工具中到底应该如何控制density和congestion?(ICC2Innovus)

吾爱IC社区星友提问&#xff1a;请教星主和各位大佬&#xff0c;对于一个模块如果不加干预工具会让inst挤成一团&#xff0c;后面eco修时序就没有空间了。如果全都加instPadding会导致面积不够overlap&#xff0c;大家一般怎么处理这种问题&#xff1f; 在数字IC后端设计实现中…

C#中ArrayList运行机制及其涉及的装箱拆箱

C#中ArrayList运行机制及其涉及的装箱拆箱 1.1 基本用法1.1.1 属性1.1.2 方法 1.2 内部实现1.3 装箱1.4 拆箱1.5 object对象的相等性比较1.6 总结1.7 其他简单结构类 1.1 基本用法 命名空间&#xff1a; using System.Collections; 1.1.1 属性 Capacity&#xff1a;获取或设…

Barrel Shifter RTL Combinational Circuit

在本博客中&#xff0c;将围绕许多设计中存在的非常有用的电路&#xff08;桶形移位器电路&#xff09;设计电路。将从最简单的方法开始实现固定位宽字的单向旋转桶形移位器&#xff0c;最后设计一个具有可参数化字宽的多功能双向桶形移位器电路。 Barrel Shifter 桶形移位器…

【Python学习】Python学习22- CGI编程

目录 【Python学习】Python学习22- CGI编程 前言CGI工作流程Web 服务器支持及配置Http头部参考 文章所属专区 Python学习 前言 本章节主要说明Python的CGI接口 CGI 目前由 NCSA 维护&#xff0c;NCSA 定义 CGI 如下&#xff1a; CGI(Common Gateway Interface)&#xff0c;通…

机器学习没那么难,Azure AutoML帮你简单3步实现自动化模型训练

在Machine Learning 这个领域&#xff0c;通常训练一个业务模型的难点并不在于算法的选择&#xff0c;而在于前期的数据清理和特征工程这些纷繁复杂的工作&#xff0c;训练过程中的问题在于参数的反复迭代优化。 AutoML 是 Azure Databricks 的一项功能&#xff0c;它自动的对…

GRU门控循环单元神经网络的MATLAB实现(含源代码)

在深度学习领域&#xff0c;循环神经网络&#xff08;RNN&#xff09;因其在处理序列数据方面的卓越能力而受到广泛关注。GRU&#xff08;门控循环单元&#xff09;作为RNN的一种变体&#xff0c;以其在捕捉时间序列长距离依赖关系方面的高效性而备受推崇。在本文中&#xff0c…

ros2学习笔记-CLI工具,记录命令对应操作。

目录 环境变量turtlesim和rqt以初始状态打开rqt node启动节点查看节点列表查看节点更多信息命令行参数 --ros-args topic话题列表话题类型话题列表&#xff0c;附加话题类型根据类型查找话题名查看话题发布的数据查看话题的详细信息查看类型的详细信息给话题发布消息&#xff0…

推荐两个工具:DeepSpeed-FastGen和DataTrove

DeepSpeed-FastGen 通过 MII 和 DeepSpeed-Inference 加速LLM生成文本 仓库地址&#xff1a;https://github.com/microsoft/DeepSpeed/tree/master/blogs/deepspeed-fastgen GPT-4 和 LLaMA 等大型语言模型 (LLM) 已成为服务于各个级别的人工智能应用程序的主要工作负载。从一…

UE5 独立程序的网络TCP/UDP服务器与客户端基础流程

引擎源码版&#xff0c;复制\Engine\Source\Programs\路径下的BlankProgram空项目示例。 重命名BlankProgram&#xff0c;例如CustomTcpProgram&#xff0c;并修改项目名称。 修改.Build.cs内容 修改Target.cs内容 修改Private文件夹内.h.cpp文件名并修改.cpp内容 刷新引擎 …

SpringMVC获取参数与页面跳转

获取参数 第一种 直接当成方法的参数&#xff0c;需要与前台的name一致 相当于Request.getAttribute("username") Controller 第二种 使用对象接收 页面的name也要和对象的字段一致 创建一个对应的实体类 Controller 将参数更换为User对象就行 SpringMVC获取到…

【设计模式】你知道游戏SL大法是什么设计模式吗?

什么是备忘录模式&#xff1f; 老规矩&#xff0c;我们先来看看备忘录模式 (Memento) 的定义&#xff1a;在不破坏封装性的前提下&#xff0c;捕获一个对象的内部状态&#xff0c;并在该对象之外保存这个状态。这样以后就可将该对象恢复到原先保存的状态。 它的UML类图如下&a…

keep-alive组件缓存

keep-alive组件缓存 从a跳b&#xff0c;a已经销毁&#xff0c;b重新渲染&#xff1b;b跳a&#xff0c;b销毁a重新渲染 源组件销毁&#xff0c;目标组件渲染 组件缓存&#xff1a;组件实例等相关&#xff08; 包括vnode&#xff09;存储起来 重新渲染指的是&#xff1a;把视图重…

MySQL---多表查询综合练习

创建dept表 CREATE TABLE dept ( deptno INT(2) NOT NULL COMMENT 部门编号, dname VARCHAR (15) COMMENT 部门名称, loc VARCHAR (20) COMMENT 地理位置 ); 添加dept表主键 mysql> alter table dept add primary key(deptno); Query OK, 0 rows affected (0.02 s…

正则表达式初版

一、简介 REGEXP&#xff1a; Regular Expressions&#xff0c;由一类特殊字符及文本字符所编写的模式&#xff0c;其中有些字符&#xff08;元字符&#xff09;不表示字符字面意义&#xff0c;而表示控制或通配的功能&#xff0c;类似于增强版的通配符功能&#xff0c;但与通…

YOLOv5改进 | 主干篇 | 华为GhostnetV1一种移动端的专用特征提取网络

一、本文介绍 本文给大家带来的改进机制是华为移动端模型Ghostnetv1,华为GhostnetV1一种移动端的专用特征提取网络,旨在在计算资源有限的嵌入式设备上实现高性能的图像分类。GhostNet的关键思想在于通过引入Ghost模块,以较低的计算成本增加了特征图的数量,从而提高了模型的…

消除噪音: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…

数据结构 | 红黑树

二叉搜索树 节点的左边比节点的值小&#xff0c;右边比节点的值大。 红黑树 红黑树的性质 节点要么是红色&#xff0c;要么是黑色根节点是黑色叶子节点都是黑色的空节点红黑树中红色节点的子节点都是黑色从任一节点到叶子节点的所有路径都包含相同数目的黑色节点 在添加或者…

Rustdesk自建服务搭建好了,打开Win10 下客户端下面状态一直正在接入网络,无法成功连接服务器

环境: Rustdesk1.2.3 自建服务器 有域名地址 问题描述: Rustdesk自建服务搭建好了,打开Win10 下客户端下面状态一直正在接入网络,无法成功连接服务器 解决方案: RustDesk是一款免费的远程桌面软件,它允许用户通过互联网远程连接和控制其他计算机。它是用Rust编程语…

爬虫进阶之selenium模拟浏览器

爬虫进阶之selenium模拟浏览器 简介环境配置1、建议先安装conda2、创建虚拟环境并安装对应的包3、下载对应的谷歌驱动以及与驱动对应的浏览器 代码setting.py配置scrapy脚本参考中间件middlewares.py 附录&#xff1a;selenium教程 简介 Selenium是一个用于自动化浏览器操作的…

web开发学习笔记(10.postman请求响应,后端接口基础知识)

1.springboot使用get请求接受简单参数 上述写法不去别get或者post请求 2.postman各种提交方式的区别 1、form-data: 就是http请求中的multipart/form-data,它会将表单的数据处理为一条消息&#xff0c;以标签为单元&#xff0c;用分隔符分开。既可以上传键值对&#xff0c;也可…