微信小程序--模版语法

1.WXML语法

小程序页面中使用的数据均需要在Page（）方法的data对象中进行声明定义

在数据声明好以后，在WXML中使用Mustache语法（ 双大括号 {{ }} ）将变量包起来，从而将数据绑定

在{{}}内部可以做一些简单的运算，支持如下几种方式

1.算数运算

2.三元运算

3.逻辑判断

4.其他...(绑定属性值等）

注意

在{{}}语法中，只能写表达式，不能写语句，也不能调用js相关的方法

2.setData()修改数据

小程序中修改数据不推荐通过赋值的方式进行修改，通过赋值的方式修改数据无法改变页面的数据

要通过调用setData()方法进行修改，setData()方法接受对象作为参数，key是需要修改的数据，value是最新的值，

setData()方法有两个作用：

1.更新数据

2.驱动视图更新

修改对象类型数据

1.新增单个/多个

直接在this.setData({})添加 “object.key”:“value”

2.修改单个/多个

1> 直接在this.setData({})覆盖“object.key”:“value”

2> es6展开运算符 （通过展开运算符能够将对象中属性复制给另一个对象，后面的属性会覆盖前面的属性）

const  object = {...this.data.object, name:'jerry' }

再在this.setData({ object })

3> Object.assign() 将多个对象合并为一个对象

const object = Object.assgin(this.data.object, {name:‘jerry’}）

再在this.setData({ object })

3>  删除单个

delete this.data.object.name

this.setData({ object : this.data.object})

4> 删除多个

rest 剩余参数

const {age，...rest} = this.data.object

this.setData({ object : rest})

修改数组类型数据

1> 新增数组元素

push（数组末尾添加数据）

concat（合并数组）

const newList = [...this.data.list, 4]

this.setData({  list: newList  })

2> 修改数组中的元素

this.setData({ ‘lsit[1].name’ : 'jerry' }]

3> 删除数组中的元素

splice（截取数组）

filter （过滤数组）

3 简易双向数据绑定

在对应属性前添加model：前缀即可

例如 <input model:value="{{value}}"/>

注意：

1.只能是一个单一字段的绑定 错误用法：<input model:value="值为 {{value}}" />

2.尚不能写 data 路径，也就是不支持数组和对象，例如：错误用法：<input model:value="{{ a.b }}" />

4.列表渲染-基本使用

通过循环遍历一个数组或对象，将其中的每个元素渲染到页面上 

wx:for

渲染的数组 item 数组的每一项 index 下标

渲染的对象 item 对象属性的值 index 对象属性

wx:key

字符串：需要遍历数组中item的某个属性，要求该属性是列表中唯一的字符串或者数字，不能进行动态改变

保留关键字 ：*this , *this 代表的是item本身，item本身是唯一的字符串或者数字

5 列表渲染-进阶用法

使用wx:for-item 可以指定数组当前元素的变量名

使用wx:for-index 可以指定数组当前下标的变量名

<block/>并不是一个组件，仅仅是一个包装元素，在页面不会做任何渲染，只接受控制属性

6 条件渲染

wx:if   wx:elif    wx:else   属性组  当条件为true 时结构展示出来，通过移除/新增节点方式来实现

hidden 当条件为true 时会将结构隐藏，通过display样式属性来实现