06. 条件渲染

条件渲染

条件渲染就是if、else if 、和 else，和vue的v-if、v-else-if、v-else原理一致

例子：

Page({
 
  data: {
    number : 4
  }
 
});

<view wx:if="{{number <= 0}}">number的值小于等于0</view>
<view wx:elif="{{number > 0 && number < 5}}">number的值在1和5之间</view>
<view wx:else>number的值大于等于5</view>

需要注意的是，else if 用的是elif，比较奇葩

block

和vue的template的效果一致，用于下面这种情况 ：（这里先用vue的template来举例）

<template v-if="true">
    <div>content</div>
    <div>content</div>
    <div>content</div>
</template>

如果不用template，你可能得这样写 ：

<div v-if="true">
    <div>content</div>
    <div>content</div>
    <div>content</div>
</div>

缺点：这样写多了一个div

或者

<div v-if="true">content</div>
<div v-if="true">content</div>
<div v-if="true">content</div>

缺点：这样写同一个判断要写三次

下面是block的实际使用例子 ：

<block wx:if="{{true}}">
  <div>content</div>
  <div>content</div>
</block>

hidden

和vue的v-show原理一致。需要搭配view标签使用

例子 ：

Page({
  data: {
    isHidden: true,
  }
})

<view hidden="{{ isHidden }}">123</view>