数据绑定
1、基本数据类型
{{msg}}
2、对象
{{person.name}}
3、数组
{{arr[0]}}
组件属性(需要在双引号之内)
控制属性(需要在双引号之内)
关键字(需要在双引号之内)
<checkbox checked="{{false}}"> </checkbox>
不要直接写 checked="false"
引号和花括号不能有空格
运算
可以在 {{}} 内进行简单的运算
三元运算、算数运算、逻辑判断、字符串运算...
列表渲染
wx:for="{{绑定一个数组/对象}}"
wx:for-item="{{循环项名称}}"
wx:for-index="{{循环项下标}}"
wx:key 绑定普通字符串时，这个字符串为 循环数组中的 对象的 唯一属性
wx:key="*this" 表示数组为普通数组， *this 为循环项
数组
wx:for-item="{{item}}"
wx:for-index="{{index}}"
对象
wx:for-item="{{value}}"
wx:for-index="{{key}}"
data: {
arr: [
{name: ‘lisi‘, age: 18},
{name: ‘libai‘, age: 28}
]
}
<view
wx:for="{{arr}}"
wx:for-item="{{item}}"
wx:for-index="{{index}}"
wx:key="name"
></view>
条件渲染: 是否需要渲染该代码块
<block></block> 一个包装元素，不会在页面中做任何渲染，只接受控制属性。
wx:if="{{true}}"
wx:elif="{{true}}"
wx:else="{{true}}"
hidden
hidden="{{true}}"
使用：
1、当标签不是频繁的切换使用 wx:if
直接把标签从页面上移除掉
2、当标签频繁的切换使用 hidden
添加样式 display： node 隐藏
模板引擎
定义：
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
使用：
<template is="msgItem" data="{{...item}}"/>
data: {
item: {
index: 0,
msg: ‘this is a template‘,
time: ‘2016-09-15‘
}
}
引用
WXML 提供两种文件引用方式import和include。
1、import
import可以在该文件中使用目标文件定义的template，如：
在 item.wxml 中定义了一个叫item的template：
<template name="item">
<text>{{text}}</text>
</template>
在 index.wxml 中引用了 item.wxml，就可以使用item模板：
<import src="item.wxml"/>
<template is="item" data="{{text: ‘forbar‘}}"/>
import 的作用域
import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。
2、include
include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置
<include src="header.wxml"/>
<!-- header.wxml -->
<view> header </view>
