微信小程序--WXML模板（页面逻辑）-2

一、WXML--条件逻辑

1.在WXML中我们使用wx:if来进行判断是否需要渲染该代码段，其中的条件需要在两个花括号，即{{}}中绑定

2.使用WXML中的wx:elif和wx:else

wx：elif是当前边if不满足的时候进行判断，如果elif后边的条件满足就执行该代码，不执行下边的elif，不满足的话继续往下走elif一直到else前边都不满足执行else所在标签的代码

<!--pages/page1/page1.wxml-->
<text wx:if="{{if1==1}}">if1存在</text>
<text wx:elif="{{if0==0}}">if0不存在</text>
<text wx:elif="{{if0==0}}">buxianshi</text>
<text wx:else>显示这个</text>

3.一次性如果想要渲染多个元素需要 用block进行封装

<block wx:if="{{false}}">
<view>hahaha</view>
<view>hahaha</view>
<view>hahaha</view>
<view>hahaha</view>
<view>hahaha</view>

</block>

4.我们在学习vue的时候，介绍了vue-if和vue-show以及他们之间的区别，那么我4在微信小程序中是不是也有类似vue-show的属性呢（hidden）

二、WXML--列表渲染 

1.列表渲染小程序比较简单，利用wx：for进行渲染，wx:for="{{}}"其中括号中的·1变量需要是数组，然后调用的时候{{index}}是索引，{{item}}是数值，

定义数据部分

 data: {
   ifs:1,
   list:[1.2,2.3,3.4,4.5],
   list2:[{name:"lifang"},{name:"lili"},{name:"xiaoi"}]
  },

例子1

<view wx:for="{{list}}">
{{index}}--{{item}}
</view>

 

例子2

<view wx:for="{{list2}}">
{{index}}--{{item.name}}
</view>

2.我们渲染完成后还需要对其绑定key值，不然会弹出警告，绑定key值可以提高页面性能 

绑定key值两种方法：

(1)通过*this绑定key值：注意：用这种方法绑定key值的时候，*this就是循环中的item本身，需要item是唯一的（字符串或数字）

<view wx:for="{{list2}}" wx:key="*this">
{{index}}--{{item.name}}
</view>

（2）字符串，我们可以在定义数据的时候在数组中每个item中定义一个属性，然后把这个属性绑定给key，定义时不要让他们重复。如下代码

  data: {
   ifs:1,
   list:[1.2,2.3,3.4,4.5],
   list2:[{name:"lifang",id:1},{name:"lili",id:2},{name:"xiaoi",id:3}]
  },

<view wx:for="{{list2}}" wx:key="id">
{{index}}--{{item.name}}
</view>

3.当我们在多重嵌套wx:for的时候item和index使用的时候会冲突，微信小程序提供了一个更改index和item的方式，通过wx:for-index和wx:for-item进行修改，例如下边代码进行更改item和index的方式

<view wx:for="{{list2}}" wx:key="id" wx:for-index="sort" wx:for-item="val">
{{sort}}--{{val.name}}
</view>