列表渲染（List Rendering）：
列表渲染是指根据数据集合，动态生成页面中的列表元素。在小程序中，可以使用 wx:for 指令来实现列表渲染。
WXML 文件中的列表渲染：
<!-- 页面的 WXML 文件中 -->
<view wx:for="{{ itemList }}" wx:for-item="item" wx:for-index="index">
{{ index + 1 }}. {{ item }}
</view>
JS 文件中的数据：
// 页面的 JS 文件中
Page({
data: {
itemList: ['Item 1', 'Item 2', 'Item 3'],
},
// 其他页面逻辑...
});
上述代码中，wx:for 指令遍历了 itemList 数组，生成了对应的列表元素。
条件渲染（Conditional Rendering）：
条件渲染是指根据某个条件，选择性地渲染页面中的元素。在小程序中，可以使用 wx:if 和 wx:else 指令来实现条件渲染。
WXML 文件中的条件渲染：
<!-- 页面的 WXML 文件中 -->
<view wx:if="{{ isShow }}">
这是一个条件渲染的元素
</view>
<view wx:else>
当条件不满足时显示的元素
</view>
JS 文件中的数据：
// 页面的 JS 文件中
Page({
data: {
isShow: true,
},
// 其他页面逻辑...
});
上述代码中，wx:if 指令根据 isShow 的值决定是否渲染对应的元素。
小程序模板中的列表渲染和条件渲染：
在小程序的模板中，也可以使用 template 标签来定义模板，然后在页面中引用该模板，并通过 is 属性动态切换模板。这样可以更好地组织代码和提高复用性。
模板文件 template.wxml：
<!-- 模板文件 template.wxml -->
<template name="listItem">
<view>{{ index + 1 }}. {{ item }}</view>
</template>
页面文件 page.wxml：
<!-- 页面文件 page.wxml -->
<template is="listItem" wx:for="{{ itemList }}" wx:for-item="item" wx:for-index="index" />
<view wx:if="{{ isShow }}">
这是一个条件渲染的元素
</view>
<view wx:else>
当条件不满足时显示的元素
</view>
通过使用模板，可以更好地组织代码结构，提高代码的可维护性。以上示例中，listItem 模板被用于列表渲染。
转载请注明出处：http://www.zyzy.cn/article/detail/9566/小程序云开发