[微信小程序]十、框架：wxml数据绑定、if条件渲染、for列表渲染

博主： justin
发布时间：2024 年 03 月 14 日
236 次浏览
关闭评论
1457字数
分类： JavaScript

数据绑定

文档：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html
wxml和html有一个区别就是:wxml不是纯文本,所以可以使用类似于vue或者django模板语言来动态传输数据。

WXML 中的动态数据均来自对应 Page 的 data，打开页面对应的js文件就可以找到。
数据绑定使用 Mustache 语法（双大括号）将变量包起来

传输字符串、数组

在app.json新建demo2页面
demo2.js中page下的data:

  data: {
    title:"2021项目开发",
    content:"欢迎参观",
    listArr:["哈哈","嘻嘻","嘿嘿"]
  },

接着wxml:

<view>嘿嘿-{{title}}</view>
<view style="color:#f11">{{content}}</view>
<view>{{listArr}}</view>

传输对象

js中的data:

 obj:{name:"佩奇",age:18,sex:"男"}

wxml:

<view>{{obj.name}}</view>

想要呈现对象的属性，只需要在wxml带点加属性名即可。

if条件渲染

wx:if

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/conditional.html

在框架中，使用 wx:if="" 来判断是否需要渲染该代码块：

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

也可以用 wx:elif 和 wx:else 来添加一个 else 块：

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view

wxml：

<view wx:if="{{false}}">1</view>
<view wx:else>2</view>

<view wx:if="{{true}}">3</view>
<view wx:if="{{1<2}}">4</view>
<view>微信小程序</view>

block wx:if

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

注意

<block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性，也就是说对代码块进行整体判断，并且不改变标签结构。
if,elif,else判断中间不能隔着其他的元素。

for列表渲染

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html

wx:for

组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
使用 wx:for-item 可以指定数组当前元素的变量名，
使用 wx:for-index 可以指定数组当前下标的变量名:

<view wx:for="{{listArr}}">
  {{index}} | {{item}}
</view>
<text decode>&nbsp;</text>

<view wx:for="{{listArr}}" wx:for-index="i" wx>
  {{ i }}-{{item}}
</view>

<view wx:for="{{listObj}}">
  <text>{{item.title}}</text> - <text>{{item.time}}</text>
</view>

js:

  data: {
    listArr:["起飞","芜湖","手里剑","走位"],
    listObj:[
      {title:"起飞芜湖",time:"2021-2-22"},
      {title:"走位走位",time:"2021-2-23"},
      {title:"捞的淌口水",time:"2021-2-34"}
    ]
  },

wx:for 也可以嵌套，下边是一个九九乘法表(这个时候要使用for-item分别制定，否则两层的item会有冲突)

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>

wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供：

字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。

保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

<view wx:for="{{listArr}}" wx:key="*this">
  {{index}} | {{item}}
</view>
<text decode>&nbsp;</text>
<view wx:for="{{listArr}}" wx:for-index="i" wx:key="i">
  {{ i }}-{{item}}
</view>

<view wx:for="{{listObj}}" wx:key="*this">
  <text>{{item.title}}</text> - <text>{{item.time}}</text>
</view>