视图结构 wxml 列表渲染 for
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的更多相关文章
- 微信小程序のwxml列表渲染
列表渲染存在的意义 以电商为例,我们希望渲染5个商品,而又希望容易改变,我们就要在wxml中动态添加. <view> <block wx:for="{{products}} ...
- 「小程序JAVA实战」小程序视图之细说列表渲染(14)
转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-14/ 列表的渲染,不管是任何语言都有列表这个概念.源码:https://github.com/li ...
- vue.js循环for(列表渲染)详解
vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...
- 微信小程序结构目录、配置介绍、视图层(数据绑定,运算,列表渲染,条件渲染)
目录 一.小程序结构目录 1.1 小程序文件结构和传统web对比 1.2 基本的项目目录 二.配置介绍 2.1 配置介绍 2.2 全局配置app.json 2.3 page.json 三.视图层 3. ...
- 微信小程序-视图列表渲染
wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件. 默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item <view ...
- 微信小程序笔记<七>视图层 —— wxml
微信小程序的视图层由 *.wxml 组成,wxml与html一样属于标签语言,但wxml与html的标签截然不一样. xwml特性 一.数据绑定 <!--wxml--> <view& ...
- 微信小程序开发教程(八)视图层——.wxml详解
框架的视图层由WXMKL(WeiXin Markup language)与WXSS(WeiXin Style Sheet)编写,由组件进行展示. 对于微信小程序而言,视图层就是所有.wxml文件与.w ...
- vue基础---列表渲染
首先简单回顾下v-for‘指令 <ol id="list_area"> <li v-for="book in books">{{book ...
- 微信小程序学习笔记二 列表渲染 + 条件渲染
1. 列表渲染 1.1 wx:for 在组件上使用wx:for控制属性绑定一个数组, 即可使用数组中各项的数据重复渲染该组件 默认数组的当前项的下标变量名默认为 index, 数组当前项的变量名默认为 ...
- Vue.js高效前端开发 • 【Vue列表渲染】
全部章节 >>>> 文章目录 一.v-for指令 1.v-for指令使用 2.实践练习(待更新) 二.计算属性 1.计算属性创建和使用 2.实践练习(待更新) 三.侦听属性 1 ...
随机推荐
- vue-cli-service 不是内部或者外部命令
原因一. 新拉取的项目没有执行 npm install,找不到相关的依赖包(也就是说没有node_modules文件夹). 解决方法: 执行下 npm install 即可 原因二. 项目的依赖包损坏 ...
- opensips使用drouting进行路由
操作系统 :CentOS 7.6_x64 opensips版本:2.4.9 drouting是Dynamic Routing(动态路由)的缩写,该模块可为特定呼叫选择(基于多个条件)最佳网关.今天整理 ...
- 力扣575(java&python)-分糖果(简单)
题目: Alice 有 n 枚糖,其中第 i 枚糖的类型为 candyType[i] .Alice 注意到她的体重正在增长,所以前去拜访了一位医生. 医生建议 Alice 要少摄入糖分,只吃掉她所有糖 ...
- 力扣150(java)-逆波兰表达式求值(中等)
题目: 根据 逆波兰表示法,求表达式的值. 有效的算符包括 +.-.*./ .每个运算对象可以是整数,也可以是另一个逆波兰表达式. 注意 两个整数之间的除法只保留整数部分. 可以保证给定的逆波兰表达式 ...
- 转载 | 如何把 thinkphp5 的项目迁移到阿里云函数计算来应对流量洪峰?
简介: 函数计算评测局的优秀征文! 如何把thinkphp5的项目迁移到阿里云函数计算来应对流量洪峰? 1. 为什么要迁移到阿里云函数? 我的项目是一个节日礼品领取项目,过节的时候会有短时间的流量洪峰 ...
- Apache Flink在 bilibili 的多元化探索与实践
简介: bilibili 万亿级传输分发架构的落地,以及 AI 领域如何基于 Flink 打造一套完善的预处理实时 Pipeline. 本文由 bilibili 大数据实时平台负责人郑志升分享,本次分 ...
- 基于 EMR OLAP 的开源实时数仓解决方案之 ClickHouse 事务实现
简介:阿里云 EMR OLAP 与 Flink 团队深度合作,支持了 Flink 到 ClickHouse 的 Exactly-Once写入来保证整个实时数仓数据的准确性.本文介绍了基于 EMR O ...
- [Ethereum] 浅谈 ERC20 在 openzeppelin-contracts 中的结构与实现
目前 openzeppelin-contracts 的稳定版是 v2.5,截止到本文发布,最新的 Tag 为 v3.0.0-rc.0 以下是 token/ETC20 的文件列表: IERC20.sol ...
- 2018-8-10-使用-Resharper-快速做适配器
title author date CreateTime categories 使用 Resharper 快速做适配器 lindexi 2018-08-10 19:16:51 +0800 2018-2 ...
- 优秀的 RocketMQ 可视化管理工具 GUI 客户端
优秀的 RocketMQ 可视化管理工具 GUI 客户端 官网地址:http://www.redisant.cn/rocketmq 快速查看所有 RocketMQ 集群,包括Brokers.Topic ...