微信小程序中的条件渲染和列表渲染，wx:if ,wx:elif,wx:else,wx:for,wx:key的使用，以及block标记和hidden属性的说明-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序中的条件渲染和列表渲染，wx:if ,wx:elif,wx:else,wx:for,wx:key的使用，以及block标记和hidden属性的说明。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1. 条件渲染

1.1. 语法格式 (wx:if, wx:elif ,wx:else)

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

当condition条件为true时，代码块渲染显示，为false时，代码块不进行渲染.

可以结合 wx:elif=“{{condition}}” 和 wx:else来进行判断

<!-- type 为 当前页面的.js文件中的data的数据 -->
<view wx:if="{{type===1}}">男</view>
<view wx:elif="{{type===2}}">女</view>
<view wx:else>保密</view>

1.2. block标记

可以使用block标记，一次性的控制多个组件的显示与隐藏，block标记本身并不进行渲染。
block并不是一个组件，它只是一个包裹性质的容器，不会再页面做任何渲染。

从下面的例子来观察下，渲染出的页面结构有何特点：

<block wx:if="ture">
  <view >view1</view>
  <view >view2</view>
</block>

微信小程序中的条件渲染和列表渲染，wx:if ,wx:elif,wx:else,wx:for,wx:key的使用，以及block标记和hidden属性的说明,微信小程序,微信小程序,小程序

block标签未曾渲染，只是充当一个包裹性质的容器

1.3. hidden属性

学过前端三剑客的应该看到这个属性就明白了，hidden是用来控制元素的显示与隐藏的。
在hidden属性上，通过条件判断元素是否显示

<view hidden="{{condition}}"}>condition条件为真时隐藏，为假时显示</view>

hidden属性，实际上是 display=none的效果

说明如下：

<view hidden="ture">条件为真时隐藏，为假时显示</view>

微信小程序中的条件渲染和列表渲染，wx:if ,wx:elif,wx:else,wx:for,wx:key的使用，以及block标记和hidden属性的说明,微信小程序,微信小程序,小程序

1.4. wx:if 与 hidden 的对比

运行方式不同
● wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏
● hidden 以切换样式的方式（display: none/block;），控制元素的显示与隐藏
使用建议
● 频繁切换时，建议使用 hidden
● 控制条件复杂时，建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换

2. 列表渲染

2.1. wx:for 语法格式及 wx:key的使用

wx:for 就是用来遍历数组的,可以循环渲染重复的组件结构

默认wx:for的格式，每一项的索引为index,每一项的项内容是item

<view wx:for="{{array}}">
  索引：{{index}}  当前项内容 {{item}}
</view>

自定义 wx:for中的索引和项
自定义wx:for中的项和索引，使用wx:for-index="xxxx"来指定索引名，使用wx:for-item="xxxx"来指定项名。

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itm">
  索引：{{idx}}  当前项内容 {{itm}}
</view>

wx:key的作用就是在列表渲染的过程中，给当前列表项指定唯一的key值，从而提高渲染的效率。
例如下面的例子：
数据部分，list.js

data: {
  userList:[
    {id:0,name:'张三'},
    {id:1,name:'李四'},
    {id:2,name:'王五'},
  ]
},

页面渲染部分,list.wxml文章来源地址https://www.toymoban.com/news/detail-593875.html

<view wx:for="{{userList}}" wx:key="id">
  索引：{{index}}  当前项内容 {{item.name}} 
</view>

到了这里，关于微信小程序中的条件渲染和列表渲染，wx:if ,wx:elif,wx:else,wx:for,wx:key的使用，以及block标记和hidden属性的说明的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！