微信小程序开发笔记④——条件渲染、列表渲染（循环）和模板的使用_微信小程序 条件渲染大于等于60,则输出合格,否则输出不合格

条件渲染

条件渲染顾名思义就是在一定条件下才会渲染页面

<view wx:if="{{flag}}">
  这是一个条件渲染
</view>

<view wx:if="{{score > 90}}">
  成绩优秀
</view>
<view wx:elif="{{score > 70}}">
  成绩良好
</view>
<view wx:elif="{{score > 60}}">
  成绩及格
</view>
<view wx:else>
  成绩不及格
</view>

<block wx:if="{{flag}}">
  <view>1</view>
  <view>2</view>
</block>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

data: {
  flag:false,
  score:91
}
1
2
3
4

hidden渲染

hidden渲染和条件渲染很相似，都是在一定条件下才会将我们需要显示的数据显示，不过两者还是有区别的，if渲染只会将符合条件的代码块渲染出来，但是hidden渲染会将所有的代码块都渲染在页面上，不过只会显示符合条件的。

所以如果条件发生改变if渲染需要重新加载，但是hidden渲染不需要，但是hidden渲染初始化的消耗要高于if渲染。

下图中哪怕是隐藏的代码块也是会渲染在页面上的。

列表渲染

通过wx:for指定我们需要循环的数组，然后我们就可以使用它默认提供的两个属性，index和item，index代表当前的索引，item表示当前的元素

<view>列表渲染</view>
<view wx:for="{{array}}">
  {{index}}:{{item}}
</view>
1
2
3
4

我们可以发现这个循环渲染是包括wx:for这个属性这一层的标签

当然我们也可以指定索引和元素的变量名，下面的代码一样可以实现和上面一样的效果

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itm">
  {{idx}}:{{itm}}
</view>
1
2
3

同样我们还可以嵌套循环，这个时候就必须指定它的元素名，比如下面这种

<view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i">
  <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i*j}}
    </view>
  </view>
</view>
1
2
3
4
5
6
7

同样还是可以通过block实现块级的循环

<block wx:for="{{[1,2,3]}}">
  <view>{{item}}</view>
</block>
1
2
3

小程序模板

模板的定义

<!-- 定义模板 -->
<template name="nameList">
  <view class="border">
    <view>name:{{name}}</view>
    <view>age:{{age}}</view>
  </view>
</template>
1
2
3
4
5
6
7

模板的使用

下面的...代表解析传递

<!-- 调用模板 -->
<template is="nameList" data="{{...item}}"/>
1
2

data: {
  item:{
    name:"zdd",
    age:22
  }
}
1
2
3
4
5
6

模板的作用域只是单个页面

模板的引用

我们可以创建一个专门的文件夹存储我们的模板文件，比如下面就创建了一个template文件夹

接着我们创建一个wxml文件，并在文件中定义好我们的模板

接着我们就可以在不同的页面使用这个模板了，不过需要想引入这个模板，可以通过import标签的src属性导入我们创建的模板文件

<!-- 引入模板 -->
<import src="/template/itemTemplate.wxml"/>
<!-- 调用模板 -->
<template is="nameList" data="{{...item}}"/>
1
2
3
4

这样就可以使用模板了

不过import没有继承性，如果a引用了b，b引用了c，那么a可以用b的代码，b也可以用c的代码，但是a不能用c的代码，它们相当于建立了连接。

include标签则是直接间将目标文件的代码拷贝了过来。