WXML模板语法-条件渲染和列表渲染

2024-05-24 23:04

本文主要是介绍WXML模板语法-条件渲染和列表渲染,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、条件渲染

1.wx:if

在小程序中,使用wx:if="{{condition}}"来判断是否需要渲染该代码块,也可以用wx:elif和wx:else来添加else判断

// pages/list/list.js
Page({data: {type:1}
})
<!--pages/list/list.wxml--><view wx:if="{{type === 1}}"> True </view>
<view wx:elif="{{type === 2}}"> False </view>
<view wx:else> 0 </view>

2.结合<block>使用wx:if

如果要一次性控制多个组件的展示与隐藏,可以使用一个<block></block>标签将多个组件包装起来,并在<block>标签上使用wx:if控制属性

<!--pages/list/list.wxml--><block wx:if="{{type === 1}}"><view> view1 </view><view> view2 </view>
</block>

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

3.hidden

在小程序中,直接使用hidden="{{condition}}"也能控制元素的显示与隐藏

// pages/list/list.js
Page({data: {flag:true}
})
<!--pages/list/list.wxml-->
<view hidden="{{flag}}"> 条件为true的时候隐藏元素,否则显示</view>

4.wx:if和hidden对比

(1)运行方式不同

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

hidden 以切换样式的方式(display:none/block),控制元素的显示与隐藏

(2)使用建议:

频繁切换时,使用hidden

控制条件复杂时,使用wx:if

二、列表渲染

1.wx:for

通过wx:for可以根据指定的数组,循环渲染重复的组件结构

默认情况下,当前循环项的索引用index表示,当前循环项用item表示

// pages/list/list.js
Page({data: {arr1:[1,2,3,4,5]}
})
<!--pages/list/list.wxml-->
<view wx:for="{{arr1}}">索引是:{{index}},item项是:{{item}}
</view>

2.手动指定索引和当前项的变量名*

(在实际开发中用到的不多)

使用 wx:for-index 可以指定当前循环项的索引的变量名

使用 wx:for-item 可以指定当前项的变量名

<!--pages/list/list.wxml-->
<view wx:for="{{arr1}}" wx:for-index="idx" wx:for-item="itemName">索引是:{{idx}},item项是:{{itemName}}
</view>

3.wx:key 的使用

类似于Vue列表渲染中的 :key,小程序在实现列表渲染时,也建议为渲染出来的列表项指定唯一的key值,从而提高渲染的效率

// pages/list/list.js
Page({data: {userList:[{id:1,name:'小红'},{id:2,name:'小明'},{id:3,name:'小白'},]}
})
<!--pages/list/list.wxml-->
<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>

注意在指定key的时候,外面不用包Mustache语法,直接将对应的key值填充过来即可

这篇关于WXML模板语法-条件渲染和列表渲染的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/999786

相关文章

Python正则表达式语法及re模块中的常用函数详解

《Python正则表达式语法及re模块中的常用函数详解》这篇文章主要给大家介绍了关于Python正则表达式语法及re模块中常用函数的相关资料,正则表达式是一种强大的字符串处理工具,可以用于匹配、切分、... 目录概念、作用和步骤语法re模块中的常用函数总结 概念、作用和步骤概念: 本身也是一个字符串,其中

Java中Switch Case多个条件处理方法举例

《Java中SwitchCase多个条件处理方法举例》Java中switch语句用于根据变量值执行不同代码块,适用于多个条件的处理,:本文主要介绍Java中SwitchCase多个条件处理的相... 目录前言基本语法处理多个条件示例1:合并相同代码的多个case示例2:通过字符串合并多个case进阶用法使用

Mysql用户授权(GRANT)语法及示例解读

《Mysql用户授权(GRANT)语法及示例解读》:本文主要介绍Mysql用户授权(GRANT)语法及示例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录mysql用户授权(GRANT)语法授予用户权限语法GRANT语句中的<权限类型>的使用WITH GRANT

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Java使用ANTLR4对Lua脚本语法校验详解

《Java使用ANTLR4对Lua脚本语法校验详解》ANTLR是一个强大的解析器生成器,用于读取、处理、执行或翻译结构化文本或二进制文件,下面就跟随小编一起看看Java如何使用ANTLR4对Lua脚本... 目录什么是ANTLR?第一个例子ANTLR4 的工作流程Lua脚本语法校验准备一个Lua Gramm

Java字符串操作技巧之语法、示例与应用场景分析

《Java字符串操作技巧之语法、示例与应用场景分析》在Java算法题和日常开发中,字符串处理是必备的核心技能,本文全面梳理Java中字符串的常用操作语法,结合代码示例、应用场景和避坑指南,可快速掌握字... 目录引言1. 基础操作1.1 创建字符串1.2 获取长度1.3 访问字符2. 字符串处理2.1 子字

IDEA自动生成注释模板的配置教程

《IDEA自动生成注释模板的配置教程》本文介绍了如何在IntelliJIDEA中配置类和方法的注释模板,包括自动生成项目名称、包名、日期和时间等内容,以及如何定制参数和返回值的注释格式,需要的朋友可以... 目录项目场景配置方法类注释模板定义类开头的注释步骤类注释效果方法注释模板定义方法开头的注释步骤方法注

Python列表去重的4种核心方法与实战指南详解

《Python列表去重的4种核心方法与实战指南详解》在Python开发中,处理列表数据时经常需要去除重复元素,本文将详细介绍4种最实用的列表去重方法,有需要的小伙伴可以根据自己的需要进行选择... 目录方法1:集合(set)去重法(最快速)方法2:顺序遍历法(保持顺序)方法3:副本删除法(原地修改)方法4:

SpringBoot条件注解核心作用与使用场景详解

《SpringBoot条件注解核心作用与使用场景详解》SpringBoot的条件注解为开发者提供了强大的动态配置能力,理解其原理和适用场景是构建灵活、可扩展应用的关键,本文将系统梳理所有常用的条件注... 目录引言一、条件注解的核心机制二、SpringBoot内置条件注解详解1、@ConditionalOn

Python基础语法中defaultdict的使用小结

《Python基础语法中defaultdict的使用小结》Python的defaultdict是collections模块中提供的一种特殊的字典类型,它与普通的字典(dict)有着相似的功能,本文主要... 目录示例1示例2python的defaultdict是collections模块中提供的一种特殊的字