前言

对于目前形式，微信小程序是一个热门，那么我们该如何去学习并且掌握之后去做实际项目呢？
为此我特意开设此专栏，在我学习的同时也将其分享给大家！

本篇文章我将带大家学习一下条件渲染相关知识点，接下来我将结合例子来讲解！

如果在往下阅读的过程中，有什么错误的地方，期待大家的指点！

一、wx：if 渲染方式

首先我将为大家介绍 wx：if 这一渲染方式，老规矩先介绍一下基本知识

1.1 wx：if 介绍

wx：if 是使用在组件内，在组件属性部分添加：wx：if=“{{ condition }}”，通过判断为 true 之后就会展示该组件，否则就不显示。

补充： 我们可以看到 wx：if 其实就是用于微信小程序中的条件结构，那么既然有 if ，那么咋可能少得了 else 和 elif。我们可以在 wx：if 里面添加 else 和 elif 进行判断。

接下来我将用一个例子来详细展示。话不多说，直接上手操作！

1.2 wx：if 实例介绍

接下来我将利用 view 组件进行演示 wx：if 语句

打开 list.wxml，构建三个 view 组件

<view wx:if="{{justic==1}}">
<image src="/pages/照片/皮卡丘.png" mode="widthFix" />
</view><view wx:elif="{{justic==2}}">
<image src="/pages/照片/7b47e8086ac6a47343618b3c7d37f2a7.jpeg" mode="widthFix" ></image>
</view><view wx:else>
<image src="/pages/照片/Screenshot 2022-08-16 142417.png" mode="widthFix"></image>
</view>

在 list.js 内创建数据
```
 data: {justic : 3,
},
```
注释

1. 我们在 wxml 内创建了三个 view 组件，分别放入不同的图片，我们想要实现利用数据 justic 来控制照片展示，比如当 justic 为1时，展示皮卡丘图片等等
2 .我们的条件渲染函数需要放在 view 组件内，这样我们才可以控制 view 组件的展示与否
效果展示（ justic 为 1 时）
效果展示（ justic 为 2 时）
效果展示（ justic 为 3 时）

二、结合 block 的整体条件渲染

如果我们想要批次控制组件的展示与否，那么这样一个一个设置会显得繁琐，那么我们如何进行打包一起控制呢？这就需要我们的 block 组件发挥作用了

2.1 block 组件

我们可以将 block 组件当成一个包裹，他只是将其组件内部包括起来，他并不会在页面上有渲染效果。

话不多说，直接上手操作！

2.1 block + wx：if 结合实例

打开 list.wxml 构建 block 组件

<block wx:if="{{pikaqiu==1}}">
<view>黄豆酱真帅！</view>
<view>跟着黄豆酱学习小程序！</view>
</block><block wx:if="{{pikaqiu==6}}">
<view>黄豆酱太棒了！</view>
<view>我要给黄豆酱点赞！</view>
</block>

在 list.js 内构建参数 pikaqiu
```
data: {justic : 3,
pikaqiu :6,
},
```
效果展示（ pikaqiu = 6 ）
效果展示（ pikaqiu = 1 ）
当然我们的 wx：if 也可以直接在 {{ }} 里面写上 true 表示显示控件

三、hidden 控制元素的显示与否

hidden 可以利用 hidden=" condition "，当条件为 true 时，隐藏控件，当为 false 时显示控件

接下来直接实例演示！

打开 list.wxml ，构建一个 view 组件

<view hidden="{{ flag }}">跟着黄豆酱学习条件渲染！</view>

在 list.js 内设置 data

   data: {justic : 3,pikaqiu :1,flag :true,},

效果展示（ flag 为 true ）
效果展示（ flag 为 false）

1. hidden 和 wx：if 都可以实现组件的显示与否，但是 wx：if 是通过动态创建和移除的方式来控制，而 hidden 是以切换样式的方式控制
2. 当我们的页面需要频繁切换的时候我们推荐使用 hidden
3. 当我们的控制条件很复杂的时候，推荐使用 wx：if 和 wx:elif 和 wx：else 配合使用

总结

大家每天都要开开心心的喔，让我们一起快乐的学习吧！

【微信小程序入门到精通】— 条件渲染实现方式相关推荐

微信小程序基础2【条件渲染、swiper组件、生命周期、发起请求API】
视频地址: https://www.bilibili.com/video/BV1cW411T7t6 [2018]学做小程序- 清华大学 https://www.bilibili.com/video/ ...
微信小程序 - WXML 模板语法 - 条件渲染
1.wx:if (1)在微信小程序中,使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块: <view wx:if="{{conditio ...
【微信小程序入门到精通】— 配置合法域名、进行网络数据请求（GET、POST）
目录前言一.网络数据请求的限制要求 1.1 配置合法域名 1.2 在微信小程序开发者工具里面查询是否成功二.网络数据请求 2.1 GET 2.2 POST 三.网络数据请求实操 3.1 发起 G ...
【微信小程序入门到精通】— 事件绑定的详细解读
目录前言一.事件绑定导论二.常用事件三.事件对象属性列表 3.1 target 和 currentTarget 的区别 3.2 bindtap 的用法总结前言对于目前形式,微信小程序是一 ...
【微信小程序入门到精通】— 微信小程序实现多页面切换（tabBar）
目录前言一.tabBar 介绍二.实操(创建 tabBar ) 2.1 基本配置 2.2 详细配置总结前言对于目前形式,微信小程序是一个热门,那么我们该如何去学习并且掌握之后去做实际项目呢 ...
微信小程序入门到精通
常见问题 1.rpx:小程序的尺寸单位,规定屏幕为750rpx,可适配不同分辨率的屏幕 2.本地资源无法通过wxss获取 RE:background-image:可以使用网络图片,或者base64,或 ...
【微信小程序入门到精通】—小程序实战构建售货平台首页
目录前言一.步骤阐述二.新建项目并梳理结构三.配置导航栏四.tabBar 实现五.轮播图实现总结前言对于目前形式,微信小程序是一个热门,那么我们该如何去学习并且掌握之后去做实际项目呢 ...
【微信小程序入门到精通】— 项目准备
目录前言一.在app.json中添加页面二.功能基本介绍 2.1 .js(脚本逻辑文件) 2.2 .json(全局配置文件) 2.3 .wxml(微信小程序结构文件) 2.4 .wxss(组件显 ...
【微信小程序入门到精通】— 微信小程序开发工具的安装
目录前言一.注册小程序账号二.安装开发环境 2.1 微信小程序开发工具介绍 2.1 安装微信开发者工具总结前言微信小程序在我们日常使用中已经占据很大一部分了,此专栏是专门为了微信小程序学习 ...

【微信小程序入门到精通】— 条件渲染实现方式

目录

前言