微信小程序-wxml语法

介绍

        WXML(WeiXin Markup Language)是框架设计的一套标签语言,可以进行页面布局,声明事件,数据绑定,条件判断。

语法

数据绑定

<view> {{message}} </view>
// page.js
Page({
  data: { // 状态
    message: 'Hello MINA!' 
  }
})

列表渲染

<!-- 在wxml文件中 -->
<view wx:for="{{array}}" wx:key="index">
  <view>{{item}}</view>
</view>
// page.js
Page({
  data: { // 状态
    array: ['cat','dog']
  }
})

条件渲染

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
// page.js
Page({
  data: {
    view: 'MINA'
  }
})

相关推荐

  1. 程序-wxml语法

    2024-03-11 09:48:01       23 阅读
  2. 程序WXML

    2024-03-11 09:48:01       10 阅读
  3. 程序 - 组件wxml中slot

    2024-03-11 09:48:01       20 阅读
  4. 程序如何实现WXML和js文件之间的数据交互

    2024-03-11 09:48:01       44 阅读
  5. 程序】wxss 和 css 、wxml 和 html 区别

    2024-03-11 09:48:01       35 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-03-11 09:48:01       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-11 09:48:01       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-11 09:48:01       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-11 09:48:01       20 阅读

热门阅读

  1. Keepalived工具的基本介绍(原理:VRRP协议)

    2024-03-11 09:48:01       21 阅读
  2. MongoDB聚合运算符:$dayOfYear

    2024-03-11 09:48:01       23 阅读
  3. selenium启用MS Edge浏览器/下载MS Edge WebDriver

    2024-03-11 09:48:01       20 阅读
  4. 嵌入式开发的3种架构

    2024-03-11 09:48:01       20 阅读
  5. 大数据开发(Spark面试真题-卷四)

    2024-03-11 09:48:01       23 阅读
  6. 新概念英语第二册 (75)

    2024-03-11 09:48:01       21 阅读
  7. sql高级

    sql高级

    2024-03-11 09:48:01      25 阅读
  8. 【力扣hot100】刷题笔记Day24

    2024-03-11 09:48:01       23 阅读
  9. git 不同远程仓库合并

    2024-03-11 09:48:01       22 阅读
  10. openmesh 学习笔记

    2024-03-11 09:48:01       27 阅读