wxml

WXML的概念

wxml (weixin makeup Language)是框架设计中的一套标签语言,可以构建出页面的结构
下面康康它的功能

数据绑定

(也就是wxml与js有关系的,在data内容中)
首先要知道wxml中的动态数据是来自page中的js中的data
数据绑定使用的是Mustache 语法(用双括号将变量包起来)
wxml_第1张图片wxml_第2张图片
wxml_第3张图片

运算

可以在{{}}内进行简单的运算

三元运算

(三元运算符是软件编程中一个固定格式,其语法为 条件表达式 ?表达式1:表达式2要知道的是表达式1是条件表达式为true时,则表达式2为条件表达式为false时
理解而言的表达式:“()? :”。
()中进行二元运算
?再运算,就形成三元运算符
语法为
其中的flag其实是条件判断的语句


{{flag? true : false}}
逻辑判断
 
数据路径运算

wxml_第4张图片
wxml_第5张图片
wxml_第6张图片
wxml_第7张图片

列表渲染

wx:for=“{{数组或者对象}}”
要注意的要点:
wxml_第8张图片

wx:for

wxml_第9张图片
wx:key=“唯一的值” 用来提高列表渲染的性能
wx:key的值以两种形式提供
1、wx:key 绑定一个普通的字符串的时候 那么这个字符串名称 肯定是循环数组中的对象的唯一属性(不会出现重复)
对于上面的例子中,wx:key=“id” 可以看出item.id是唯一属性
2、wx:key="*this" 就表示你的数组 是一个普通的数组 *this表示的是循环项
普通数组:例如:[1,2,3,4,5,6] 或者为[“1”,“2”,“3”,“4”,“5”,“6”]
wxml_第10张图片
当出现数组的嵌套循环的时候,尤其要注意以下绑定的名称不要重名
wx:for-item=“item” wx:for-index=“index”
默认情况下,我们不写
wx:for-item=“item” wx:for-index=“index”
小程序也会把循环项的名称和索引的名称默认为item和index
只有一层循环的话 ( wx:for-item=“item” wx:for-index=“index”)可以省略

对象循环

wx:for="{{对象}}" wx:for-item=”对象的值" wx:for-index=“对象的属性”
循环对象的时候 最好把item和index的名称修改一下
wx:for-item=“value” wx:for-index=“key”
wxml_第11张图片

block

1、占位符的标签
2、写代码的时候是存在的,但是页面渲染的时候会把它移除掉

也就是我们如果写循环的时候,不想再外面写一层格外的标签,则可以用block标签来做个占位符

条件渲染

涉及的知识点为微信:wx:if 以及 hidden

wx:if 以及 hidden

wx:if主要涉及
wx:if
wx:elif
wx:else
wxml_第12张图片

要知道的是hidden它是通过修改样式(也就是display:none)来显示的
要注意的是display样式不可以和hidden同时使用
wxml_第13张图片
wxml_第14张图片

两者要什么时候使用:

一般频繁使用的时候用hidden
不经常使用用wx:if

你可能感兴趣的:(微信小程序,小程序)