WXML模板语法-条件渲染和列表渲染

简介: 本文档介绍了微信小程序中的条件渲染和列表渲染。条件渲染主要使用`wx:if`、`wx:elif`、`wx:else`和`hidden`属性。`wx:if`通过判断表达式决定是否渲染代码块,而`hidden`通过切换CSS的`display`属性控制元素隐藏。两者在性能和使用场景上有区别,频繁切换推荐使用`hidden`,复杂条件推荐使用`wx:if`。列表渲染则利用`wx:for`遍历数组生成列表,可以通过`wx:for-index`和`wx:for-item`自定义索引和项的变量名,同时需使用`wx:key`为列表项指定唯一标识以优化渲染效率。

一、条件渲染


1.wx:if


在小程序中,使用wx:if="{{condition}}"来判断是否需要渲染该代码块,也可以用wx:elif和wx:else来添加else判断


// pages/list/list.js
Page({
  data: {
    type:1
  }
})


<!--pages/list/list.wxml-->
 
<view wx:if="{{type === 1}}"> True </view>
<view wx:elif="{{type === 2}}"> False </view>
<view wx:else> 0 </view>


2.结合<block>使用wx:if


如果要一次性控制多个组件的展示与隐藏,可以使用一个<block></block>标签将多个组件包装起来,并在<block>标签上使用wx:if控制属性


<!--pages/list/list.wxml-->
 
<block wx:if="{{type === 1}}">
  <view> view1 </view>
  <view> view2 </view>
</block>


注意:<block>并不是一个组件,它只是一个包裹性质的容器,不会在页面中做任何渲染


3.hidden


在小程序中,直接使用hidden="{{condition}}"也能控制元素的显示与隐藏


// pages/list/list.js
Page({
  data: {
    flag:true
  }
})


<!--pages/list/list.wxml-->
<view hidden="{{flag}}"> 条件为true的时候隐藏元素,否则显示</view>


4.wx:if和hidden对比


(1)运行方式不同


wx:if 以动态创建和移除元素的方式控制元素的展示和隐藏


hidden 以切换样式的方式(display:none/block),控制元素的显示与隐藏


(2)使用建议:


频繁切换时,使用hidden


控制条件复杂时,使用wx:if


二、列表渲染


1.wx:for


通过wx:for可以根据指定的数组,循环渲染重复的组件结构


默认情况下,当前循环项的索引用index表示,当前循环项用item表示


// pages/list/list.js
Page({
  data: {
    arr1:[1,2,3,4,5]
  }
})


<!--pages/list/list.wxml-->
<view wx:for="{{arr1}}">
  索引是:{{index}},item项是:{{item}}
</view>


2.手动指定索引和当前项的变量名*


(在实际开发中用到的不多)


使用 wx:for-index 可以指定当前循环项的索引的变量名


使用 wx:for-item 可以指定当前项的变量名


<!--pages/list/list.wxml-->
<view wx:for="{{arr1}}" wx:for-index="idx" wx:for-item="itemName">
  索引是:{{idx}},item项是:{{itemName}}
</view>


3.wx:key 的使用


类似于Vue列表渲染中的 :key,小程序在实现列表渲染时,也建议为渲染出来的列表项指定唯一的key值,从而提高渲染的效率


// pages/list/list.js
Page({
  data: {
    userList:[
      {id:1,name:'小红'},
      {id:2,name:'小明'},
      {id:3,name:'小白'},
    ]
  }
})


<!--pages/list/list.wxml-->
<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>


注意在指定key的时候,外面不用包Mustache语法,直接将对应的key值填充过来即可

目录
相关文章
|
5月前
|
JavaScript
Vue模板语法、属性绑定、条件渲染的学习
Vue模板语法强调插值表达式需返回结果以显示。避免问题的方法是将逻辑处理放在JS中,不在模板内实现。Vue属性绑定使用`v-bind`(可简写为:)动态绑定类或ID,当值为null或undefined时自动移除。支持布尔类型和动态绑定多值。条件渲染包括`v-if`、`v-else`、`v-else-if`和`v-show`,其中`v-if`用于真值时渲染,`v-show`按条件显示,两者的区别在于频繁切换场景和渲染方式。
|
4月前
|
JavaScript 前端开发 测试技术
|
6月前
|
JavaScript 数据可视化 容器
easyv平台_过滤器强制修改dom(暴力自定义组件渲染样式)
easyv平台_过滤器强制修改dom(暴力自定义组件渲染样式)
32 0
|
6月前
|
JavaScript 前端开发 索引
Vue 条件渲染 与 列表渲染
Vue 条件渲染与列表渲染 介绍及演示。
70 0
|
6月前
|
JavaScript 前端开发 C++
vue的条件渲染以及列表渲染的总结归纳加代码演示
vue的条件渲染以及列表渲染的总结归纳加代码演示
86 0
|
11月前
|
JavaScript
vue模板语法上集->插值,指令,过滤器,计算属性&监听属性,vue购物车
vue模板语法上集->插值,指令,过滤器,计算属性&监听属性,vue购物车
42 0
|
JavaScript 算法 前端开发
【Vue】条件渲染&列表渲染来啦(下)
【Vue】条件渲染&列表渲染来啦(下)
|
JavaScript 前端开发 数据安全/隐私保护
【Vue】条件渲染&列表渲染来啦(上)
【Vue】条件渲染&列表渲染来啦
|
JavaScript
Vue绑定样式+条件渲染
Vue绑定样式+条件渲染
|
JavaScript 前端开发
Vue —— 基础(三)(样式绑定、条件渲染)
Vue —— 基础(三)(样式绑定、条件渲染)
111 1