wxml 判断 小程序_小程序学习笔记之WXML

1.数据绑定:{{}}

a.

数据绑定使用 Mustache 语法(双大括号)将变量包起来,在对应的.js文件中写数据,

b.

在.js中写一个值是否为boolean型,不要加上双引号

在.js中把对应的数据写在data{}里面,或者调用this.setData()方法

c.

在.wxml中可以做运算:三元运算,算术运算,逻辑判断,字符串运算,数据路径运算

在.wxml中也可以做组合

2.条件渲染:wx:if wx:for

a.wx:if

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

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

b.wx:if

block wx:if:我们想一次性判断多个组件标签可以用block wx:if

如做三个相同模块的新闻界面时,可以用block 来重复

ps: 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

c.wx:for

在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认下标为:index:改变下标名用wx:for-index ="新的下标名"

默认数组名为item:改变数组名用wx:for-item="新的数组名"

d.wx:for

wx:for可以嵌套

e.wx:for

block wx:for:

类似block wx:if，也可以将wx:for用在标签上，以渲染一个包含多节点的结构块

3.模板:template,import

a.

WXML提供模板(template)，可以在模板中定义代码片段，然后在不同的地方调用。

b.定义和使用模板

定义:使用name属性，作为模板的名字。然后在内定义代码片段，如：

{{index}}: {{msg}}

Time: {{time}}

使用:使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如：

Page({

data: {

item: {

index: 0,

msg: 'this is a template',

time: '2016-09-15'

}

}

})