wxml 判断小程序_小程序系列~6.WXML语法

最新推荐文章于 2024-01-03 16:59:35 发布

复健朱医生

最新推荐文章于 2024-01-03 16:59:35 发布

阅读量370

点赞数

文章标签： wxml 判断小程序

本文链接：https://blog.csdn.net/weixin_42502288/article/details/112290535

版权

本文详细介绍了WXML的动态数据绑定、列表渲染、条件判断以及模板和引用的使用。重点讨论了wx:if与hidden的区别，wx:if适用于条件不大可能改变的情况，而hidden适合频繁切换。同时，文章讲解了如何定义和使用模板，以及import和include的差异。

摘要由CSDN通过智能技术生成

WXML(WeiXin Markup Language)是框架设计的一套标签语言。

1、数据绑定

WXML 中的动态数据均来自对应 Page 的 data。数据绑定使用双大括号将变量包起来。

(1)字符串内容

 {
    { message }} {
    {"hello" + message}}Page({
      data: {
        message: 'Hello MINA!'  }})

(2)组件属性

Page({
      data: {
        id: 0  }})

(3)逻辑判断

Page({
      data: {
        condition: true  }})

(4)关键字

不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。

(5)运算

 Hidden  {
    {a + b}} + {
    {c}} + d Page({
      data: {
        a: 1,    b: 2,    c: 3  }})

2、列表渲染

(1)wx:for

使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

wx:for-item 指定数组当前元素的变量名，默认为 item

wx:for-index 指定数组当前下标的变量名，默认为 index。

  {
    {idx}}: {
    {itemName.message}}Page({
      data: {
        array: [{

关注