微信小程序——条件渲染

微信小程序——条件渲染

1、wx：if

在小程序中，使用wx：if="{{condition}}"来判断是否需要渲染该代码块：
格式：

<view wx:if="{{condition}}"> True </view>

也可以用wx:elif 和wx:else 来添加 else if 和 else 判断：
！！！ “===”是严格等于

首先在页面 .js 文件的data中定义变量：randomType 赋值为1

  data: {
    msg:'你好，',
    randomType: 1
  },

随后在 .wxml 文件中添加显示字段：

<view >男</view>
<view >女</view>
<view >保密</view>

<view wx:if = "{{randomType === 1}}">男</view>
<view wx:elif = "{{randomType === 2}}">女</view>
<view wx:else>保密</view>

显示样式：当我们添加了判断条件时，逻辑符合则输出显示

2、结合block使用wx:if

前言：block并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染

当我们直接把一些显示嵌入一个view里面时，页面会直接识别成一个组件，如下：

<view wx:if = "{{randomType === 1}}">
	<view >男</view>
	<view >女</view>
	<view >保密</view>
</view>

而当我们修改使用block包装时，仅识别为单独输出，不是组件，并且在隐藏时默认为没有此语句，优化了结构。如下：在此时识别仅为单独语句输出

<block wx:if = "{{true}}" >
  <view >男</view>
  <view >女</view>
  <view >保密</view>
</block>

<block wx:if = "{{false}}" >
  <view >男</view>
  <view >女</view>
  <view >保密</view>
</block>

3、hidden的使用

在小程序中，hidden也可以用来控制元素的显示与隐藏
格式为：hidden = “{{condition}}”
样式：

<view hidden = "{{true}}">当条件为TRUE时 ，元素则会被隐藏，否则显示</view>

实例：

4、wx:if 和hidden的对比

1、运行方式不同

1、

• wx:以动态创建和移除元素的方式，控制元素的展示与隐藏
• hidden以切换样式的方式（display：none/block），控制元素的显示与隐藏

2、

• 频繁切换时，建议使用hidden
• 控制条件复杂时，建议使用 wx:if 搭配 wx:elif 、wx:else 进行展示与隐藏的切换

wx：if 在上面已阐述，为动态的识别元素语句

此文章仅为本人记录学习过程笔记，内容可能存在错误，请自行甄别。
若有发现不妥之处亦可讨论修正，共同学习。