小程序模板语法

模板

小程序中使用类似vue的模板语法

data

定义状态data

Page({
	data: {
		// 字符串类型的数据
		info: 'info data',
		// 数组类型的数据
		msgList: [{msg: 'hello'},{msg: 'world'}]
	}
})

在data中的数据绑定到页面中渲染，使用Mustache语法（差值表达式）将变量包裹起来

<view> {{ 要绑定的数据名称 }} </view>

绑定属性

<image src='{{ imgSrc }}'></image>

在小程序中没有类似vue中v-bind的语法 直接使用插值表达式就是实现属性的值绑定

函数定义

函数直接定义在对象内即可

通过this.setData()进行状态的修改

Page({
	data:{
		count: 0
	},
	changeCount() {
		this.setData({
			count: this.data.count + 1
		})
	}
})

wx指令

wx:if

在小程序中通过wx:if='布尔值'来判断是否需要渲染该代码块

<view wx:if="{{ condition }}"> True </view>

也可以通过wx:elif和wx:else来添加else判断

<view wx:if="{{ type === 1 }}"> 男 </view>
<view wx:elif="{{ type === 2 }}"> 女 </view>
<view wx:else> 保密 </view>

hidden

使用组件的hidden属性也可以控制元素的显示和隐藏

<view hidden="{{ condition }}"> True </view>

与wx:if相反 当条件为true时隐藏 条件为false时显示

注：

wx:if以动态创建和移除元素的方式，控制元素的显示和隐藏

hidden以切换样式的方式(display:none/block;)，控制元素的显示与隐藏

频繁切换时，使用hidden可以节省性能

控制条件复杂时，建议使用wx:if搭配wx:elif、wx:else进行展示与隐藏的切换

wx:for

通过wx:for可以根据指定过的数据，循环渲染重复的组件结构

<view wx:for="{{ array }}">
	索引是:{{ index }} 当前项是:{{ item }}
</view>

默认情况下，当前循环项的索引用index表示，当前循环项用item表示

key

类似于Vue列表渲染中的:key，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的key值，从而提高渲染的效率

// data 数据
data: {
	userList: [
		{ id: 1, name: 'zs'},
		{ id: 2, name: 'ls'},
		{ id: 3, name: 'ww'},
	]
}

// wxml结构
<view wx:for="{{ userList }}" wx:key="id">{{ item.name }}</view>
// 这里的id是循环项内的id 不需要插值表达式

索引和变量名的修改

使用wx:for-index可以指定当前循环项的索引的变量名

使用wx:for-item可以指定当前项的变量名

<view wx:for="{{ array }}" wx:for-index="idx" wx:for-item="itemName">
	索引是:{{ idx }} 当前项是:{{ itemName}}
</view>