html模板中判断数据类型,【前端小程序】第六章 模板语法

WXML(WeiXin Markup Language)是框架设计的⼀套标签语⾔，结合基础组件、事件系统，可以构建出⻚⾯的结构。

1. 数据绑定

1.1 普通写法

view 相当于 html中的div 标签，text 相当于html标签中的span标签。

{{msg}}

data: {

msg: "hello mina"

}

1.2 组件属性

Page({

data: {

id: 0

}

})

1.3 bool类型

不要直接写 checked= false ，其计算结果是⼀个字符串

{{ 11 % 2 ===0 ? '偶数' : '奇数' }}

2.2 算数运算

{{a + b}} + {{c}} + d

Page({

data: {

a: 1,

b: 2,

c: 3

}

})

2.3 逻辑判断

2.4 字符串运算

{{ '1' + '1'}}

2.5 注意

花括号和引号之间如果有空格，将最终被解析成为字符串;

3. 列表渲染

3.1 wx:for

项的变量名默认为 item wx:for wx:for-item 可以指定数组当前元素的变量名。

下标变量名默认为 index wx:for wx:for- index 可以指定数组当前下标的变量名。

wx:key ⽤来提⾼数组渲染的性能。

3.2 wx:key 绑定的值有如下选择:

String类型，表示循环项中的唯一属性，如:

list:[{id:0,name:"炒饭"},{id:1,name:"炒面"}]

wx:key="id"

保留字 this ，它的意思是 item 本⾝ ，this 代表的必须是 唯⼀的字符串和数组。

list:[1,2,3,4,5]

wx:key="*this"

wx:for 列表渲染代码 :

索引 {{index}} ---> 值:{{item}}

属性:{{key}} --->

值:{{value}}

索引 {{index}} ---> 值:{{item}}

Page({

/**

* 页面的初始数据

*/

data: {

person: {

age: 123,

name: "张三",

height: 1.66

}

},

})

3.3 block 标签

渲染⼀个包含多节点的结构块�block最终不会变成真正的dom元素。

{{index}}:

{{item}}

4 条件渲染

4.1 wx:if

1.在框架中，使⽤ wx:if="{{condition}}" 来判断是否需要渲染该代码块：

条件渲染

显示

隐藏

最终的

4.2 hidden

隐藏

显示

类似 wx:if。

频繁切换 ⽤ hidde。

非频繁切换使用 wx:if。

5. ⼩程序事件的绑定

小程序中绑定事件，通过bind关键字来实现。如bindtap bindinput bindchange等，不同的组件支持不同的事件，具体看组件说明。

5.1 在wxml中编写

{{num}}

5.2 在js中编写

Page({

/**

* 页面的初始数据

*/

data: {

num: 0

},

handleinput(e) {

this.setData({

num: e.detail.value

});

}

})

5.3 微信小程序中的双向绑定实现点击 +或者-实现数字的加减。

5.3.1 wxml

{{num}}

+

-

5.3.2 js

Page({

/**

* 页面的初始数据

*/

data: {

num: 0

},

handleinput(e) {

this.setData({

num: e.detail.value

});

},

handleTap(e) {

const operation = e.currentTarget.dataset.operation

console.log(operation);

this.setData({

/* 注意这里面的 num 不能是 this.num 而是 this.data.num */

num: this.data.num + operation

})

}

})