条件渲染

1. 概念：

只有当条件成立时才渲染生成

2.wx:if属性的设置

示例代码：

<text wx:if="{{thisWeekMovie.isHighlyRecommended}}">强烈推荐</text>

注：只有当thisWeekMovie.isHighlyRecommended为真时，界面元素才会被渲染

类似的：使用hidden属性也可以实现类似的效果，但元素总是会被生成，增大初始化开销

<text hidden="{{!thisWeekMovie.isHighlyRecommended}}">强烈推荐</text>

列表渲染（循环渲染）

1. 概念：

重复的渲染生成组件

2.wx:for属性的设置

示例代码：

<view class="container"> <text class="title">本周推荐</text> <view class="movie" wx:for="{{weeklyMovieList}}"> <image src="{{item.imagePath}}" class="movie-image"></image> <view class="movie-details"> <text font-size="45rpx">{{item.name}}</text> <text class="subtitle">{{item.comment}}</text> <text wx:if="{{item.isHighlyRecommended}}" style="font-size:16px; color:red">强烈推荐</text> </view> </view></view>

Step 1. 在要列表显示的view元素属性中新增

wx:for="{{这里是所要遍历输出的数组对象}}"

Step 2. 将视图中所有需要调用数组中对象的变量改为 item
注： item为默认的循环变量

Step 3. 将视图中所有需要显示循环次数的变量改为 index

<text font-size="45rpx">第{{index + 1}}周： {{item.name}}</text>

注： index为默认的循环变量