WXML是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。

wxml是一个严格的标记性语言,有开始就必须有结束,单标签就一个有结束符

5.1、数据绑定

在js逻辑层中定义数据源,在wxml通过插值表达式调用定义好的数据源中数据

可以在初始化后,通过一个setData方法来进行后续数据源数据的修改工作。使用setData方法是一定要注意this的指向问题,setData是当前页面对象中的方法。

# 语法

this.setData({key:value})

wxml绑定数据源数据

列表渲染 for

语法:wx:for  循环

  • wx:for-index可以指定数组当前下标的变量名 默认名为 index
  • wx:for-item 可以指定数组当前元素的变量名  默认名为 item
  • wx:key  可以定义也可以不定义   唯一的标识符 提高性能
  • 条件渲染

    语法:wx:if

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

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

视图结构 wxml 列表渲染 for的更多相关文章

  1. 微信小程序のwxml列表渲染

    列表渲染存在的意义 以电商为例,我们希望渲染5个商品,而又希望容易改变,我们就要在wxml中动态添加. <view> <block wx:for="{{products}} ...

  2. 「小程序JAVA实战」小程序视图之细说列表渲染(14)

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-14/ 列表的渲染,不管是任何语言都有列表这个概念.源码:https://github.com/li ...

  3. vue.js循环for(列表渲染)详解

    vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...

  4. 微信小程序结构目录、配置介绍、视图层(数据绑定,运算,列表渲染,条件渲染)

    目录 一.小程序结构目录 1.1 小程序文件结构和传统web对比 1.2 基本的项目目录 二.配置介绍 2.1 配置介绍 2.2 全局配置app.json 2.3 page.json 三.视图层 3. ...

  5. 微信小程序-视图列表渲染

    wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件. 默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item <view ...

  6. 微信小程序笔记<七>视图层 —— wxml

    微信小程序的视图层由 *.wxml 组成,wxml与html一样属于标签语言,但wxml与html的标签截然不一样. xwml特性 一.数据绑定 <!--wxml--> <view& ...

  7. 微信小程序开发教程(八)视图层——.wxml详解

    框架的视图层由WXMKL(WeiXin Markup language)与WXSS(WeiXin Style Sheet)编写,由组件进行展示. 对于微信小程序而言,视图层就是所有.wxml文件与.w ...

  8. vue基础---列表渲染

    首先简单回顾下v-for‘指令 <ol id="list_area"> <li v-for="book in books">{{book ...

  9. 微信小程序学习笔记二 列表渲染 + 条件渲染

    1. 列表渲染 1.1 wx:for 在组件上使用wx:for控制属性绑定一个数组, 即可使用数组中各项的数据重复渲染该组件 默认数组的当前项的下标变量名默认为 index, 数组当前项的变量名默认为 ...

  10. Vue.js高效前端开发 • 【Vue列表渲染】

    全部章节 >>>> 文章目录 一.v-for指令 1.v-for指令使用 2.实践练习(待更新) 二.计算属性 1.计算属性创建和使用 2.实践练习(待更新) 三.侦听属性 1 ...

随机推荐

  1. 急速上线 Serverless 钉钉机器人“防疫精灵”

    新型冠状病毒疫情肆虐的春节,大家都过得人心惶惶,作为被关在家的程序狗,总觉得要做点什么.于是阿里云 IoT 事业部的几个同学就开始了防疫精灵的开发之路. 从点子到防疫宝,只花了一个下午时间:从防疫宝到 ...

  2. Go Mysql Driver 集成 Seata-Golang 解决分布式事务问题

    简介: 2020 年 4 月,我们开始尝试实现 go 语言的分布式事务框架 Seata-Golang.众所周知,Seata AT 模式以无业务代码侵入的特点,被广大开发者推崇.Java 版 Seata ...

  3. [FAQ] Python的虚拟环境和包管理

      1. 创建虚拟环境 $ python -m venv test-env 2. 激活虚拟环境 windows:tutorial-env\Scripts\activate (powershell: . ...

  4. 2018-8-29-dotnet-core-添加-SublimeText-编译插件

    title author date CreateTime categories dotnet core 添加 SublimeText 编译插件 lindexi 2018-08-29 08:53:47 ...

  5. 2019-9-19-dotnet-找不到-PostAsJsonAsync-方法

    title author date CreateTime categories dotnet 找不到 PostAsJsonAsync 方法 lindexi 2019-09-19 14:53:58 +0 ...

  6. 11.Node节点维护

    题目:Node节点维护 配置环境kubectl config use-context ek8s 将名为ek8s-node-0的node节点设置为不可用,并重新调度该node上所有运行的pods. 官方 ...

  7. SQL窗口分析函数使用详解系列三之偏移量类窗口函数

    1.综述 本文以HiveSQL语法进行代码演示. 对于其他数据库来说同样也适用,比如SparkSQL,FlinkSQL以及Mysql8,Oracle,SqlServer等传统的关系型数据库. 已更新第 ...

  8. 通过虚拟机镜像部署zabbix

    前言 由于基础镜像的缘故,zabbix部署过程中很可能出现各种缺少依赖包的情况,如果环境中又无法连接互联网,系统部署会非常麻烦.为此zabbix官方提供了虚拟机镜像,导入后可以直接在平台上拉起虚拟机, ...

  9. 我用 GitHub 9.8k 的 Go 语言 2D 游戏引擎写了个游戏

    前言 hi,大家好,这里是白泽.今天给大家分享一个 GitHub 9.8k 的 Go 语言 2D 游戏引擎. https://github.com/hajimehoshi/ebiten 引擎的贡献者依 ...

  10. 15、数据库加固-redis 加固

    1.禁止网络访问 Redis 服务 更改配置文件,使服务监听本地回环地址 修改 redis 配置文件:vi 安装路径/redis.conf 确保:bind 127.0.0.1(::1:表示 ipv6 ...