WXML 模板语法

目录

一.列表渲染

1.wx:for

 2.手动指定索引和当前项的变量名(多此一举)

 3.wx:key的使用

二.条件渲染 

1.wx:if

2.结合使用wx:if 

 3.hidde

4.wx:if与hidden的对比 

---

一.列表渲染

1.wx:for

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

<view wx:for="{{arr}}">
  索引是:{{index}},item项是: {{item}}
</view>

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

 2.手动指定索引和当前项的变量名(多此一举)

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

  <view wx:for="{{arr}}" wx:for-index="idx" wx:for-item="itemname">
    索引是:{{idx}},item项是: {{itemname}}
  </view>

 3.wx:key的使用

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

 //data数据
  data: {
    userList:[
      {id:1,name:"小红"},
      {id:2,name:"小蓝"},
      {id:3,name:"小绿"}
    ]
  }

//wxml结构
<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>

---

二.条件渲染 

1.wx:if

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

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

也可以用wx:elif和wx:else来添加else判断:

<view wx:if="{{type===0}}">女</view>
<view wx:elif="{{type===1}}">男</view>
<view wx:else="{{type===2}}">其他</view>

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

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

<block wx:if="{{randomNum1>50}}">
<view>1</view>
<view>2</view>
</block>

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

 3.hidde

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

4.wx:if与hidden的对比 

1.运行方式不同

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

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

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

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

2.使用建议

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

  <view wx:if="{{type===0}}">女</view>
  <view wx:elif="{{type===1}}">男</view>
  <view wx:else="{{type===2}}">其他</view>

  js中data中的数据: