微信小程序模板语法

数据渲染是指通过模板语法把 data 中的数据展示到页面当中，小程序有一套专门的模板语法来实现数据的渲染。

1.1 双向绑定

小程序中通过插值语法，即双大括号实现数据的绑定，我们来将上一小节定义的数据渲染到页面当中：

// pages/index/index.js
// 调用 Page 函数
Page({
  data: {
    msg: '大家好，这是我的第一个小程序！',
  },
  // 方法
  sayHi(name = '小明') {
    console.log('你好' + name)
  },
})

<!-- pages/index/index.wxml -->
<view class="msg">{{msg}}</view>
<!-- 重点注意，属性的绑定也是 {{}} -->
<input name="number" value="{{msg}}" />

上述代码就是小程序数据绑定的语法了，重点要注意对【属性的绑定】使用的仍然采用插值语法。

小程序支持简易的数据双向绑定，语法如下所示：

语法：model:value="{{变量名}}"

<input name="number" model:value="{{msg}}" />

大家要注意并不是所有的表单元素都支持数据双向绑定，其中 input、textarea、slider 组件可以支持。

说明：提示Do not have handler in component...，给元素绑定bindinput绑定空函数事件即可或者忽略警告。

扩展-属性绑定

对元素上的属性进行动态绑定

语法：属性名="{{data}}"

  data: {
    addClass: true,
    url:'/pages/meng/index',
  }   
<view class="{{addClass?'className1':'className2'}}">
    <text>动态class</text>
  <navigator url="{{url}}">go</navigator>
</view>

1.2 列表渲染

如果 data 中有一个数组类型的列表数据，我们要如何渲染出来呢？

小程序提供了一个指令 wx:for 类似于 Vue 中的 v-for，通过一个小例子来学习：

// pages/index/index.js
// 调用 Page 函数
Page({
  data: {
    msg: '大家好，这是我的第一个小程序！',
    number: 1,
    students: [
      { id: 1, name: '小明', age: 18, gender: '男' },
      { id: 2, name: '小红', age: 17, gender: '女' },
      { id: 3, name: '小刚', age: 19, gender: '男' },
      { id: 4, name: '小丽', age: 18, gender: '女' },
      { id: 5, name: '小米', age: 19, gender: '女' },
    ],
  },
  // 方法
  sayHi(name = '小明') {
    console.log('你好' + name)
  },
})

1.2.1 基本的语法格式

语法：wx:for="{{数据名称}}"

::: v-pre wx:for 的语法格式为 wx:for="{{ 数据名称 }}" ，并且内置默认通过 index 获取数组的索引值，item 访问数组的单元值，如下代码所示： :::

<!-- pages/index/index -->
<view class="students">
  <view class="item">
    <text>序号</text>
    <text>姓名</text>
    <text>年龄</text>
    <text>性别</text>
  </view>
  <view class="item" wx:for="{{students}}">
    <text>{{index + 1}}</text>
    <text>{{item.name}}</text>
    <text>{{item.age}}</text>
    <text>{{item.gender}}</text>
  </view>
</view>

上述代码中 index 读取的是数组的索引值，item 读取的是数组的单元。

在使用 wx:for 时会收到一个警告，

上述警告是由于在使用 wx:for 时没有指定 wx:key 属性，这个 wx:key 属性的作用于 Vue 中一样的，但是语法稍有不同，大家一定要注意，如下所示：

<!-- pages/index/index -->
<view class="students">
  <view class="item">
    <text>序号</text>
    <text>姓名</text>
    <text>年龄</text>
    <text>性别</text>
  </view>
+ <view class="item" wx:for="{{students}}" wx:key="name">
    <text>{{index + 1}}</text>
    <text>{{item.name}}</text>
    <text>{{item.age}}</text>
    <text>{{item.gender}}</text>
  </view>
</view>

上述代码中 wx:key 属性的值要求必须具有唯一性，使用时分成两种情形：

• 数组单元为简单类型数据时，使用 *this 指定为 wx:key 的值

• 数组单元是对象类型时，只要写对象的属性名

1.2.2 自定义访问单元值和索引值

通过 wx:for-index 和 wx:for-item 来分别指定如何访问数组的索引值和单元值，如下代码所示：

语法：wx:for-index="索引名" wx:for-item="单元名"

<!-- pages/index/index -->
<view class="students">
  <view class="item">
    <text>序号</text>
    <text>姓名</text>
    <text>年龄</text>
    <text>性别</text>
  </view>
  <view class="item" wx:for="{{students}}" wx:for-index="key" wx:for-item="student">
    <text>{{key + 1}}</text>
    <text>{{student.name}}</text>
    <text>{{student.age}}</text>
    <text>{{student.gender}}</text>
  </view>
</view>

上述代码中分别指定了 key 获取的是数组的索引值，student 获取的是数组的单元值。

1.3 条件渲染

1.3.1 wx:if

在对数据进行渲染时经常需要根据条件来处理，如后台暂无数据提示，可以使用 wx:if 来实现，我们来看具体的用法：

语法：wx:if="{{布尔值}}"

<!-- pages/index/index.wxml -->
<!-- 省略前面小节的代码 -->
+ <view class="students" wx:if="{{students.length>0}}">
  <view class="item">
    <text>序号</text>
    <text>姓名</text>
    <text>年龄</text>
    <text>性别</text>
  </view>
  <view
    class="item"
    wx:for="{{students}}"
    wx:key="name"
  >
    <text>{{index + 1}}</text>
    <text>{{item.name}}</text>
    <text>{{item.age}}</text>
    <text>{{item.gender}}</text>
  </view>
</view>
+ <view wx:else> 暂无数据... </view>

1.3.2 hidden

除了使用 wx:if 来控制元素的显示外，还可以使用 hidden 属性来实现相同的结果。

语法：hidden="{{布尔值}}"

// pages/index/index.js
// 调用 Page 函数
Page({
  data: {
    seen: true,
  },
  toggle() {
    // 切换 seen 的值
    this.setData({
      seen: !this.data.seen,
    })
  },
})

<!-- 条件数据渲染 -->
<button type="primary" bind:tap="toggle">显示/隐藏</button>
<view wx:if="{{seen}}">{{msg}}</view>
<view hidden="{{!seen}}">{{msg}}</view>

对比 wx:if 和 hidden 二者的区别：

• wx:if 在条件为 true 时会将内容渲染出来，否则不会进行渲染，是通过【添加/删除】节点的方式来实现的。

• hidden 在条件为 true 时会隐藏内容，否则会显示内容，是通过 display 样式属性来实现的。

1.3.3 block

block 是小程序中一个特殊的标签，用于分组控制页面元素的渲染

需求：假如满足某个条件是显示多个结构。

方案：就可以使用block包裹需要控制的多个结构进行控制

<block wx:if="{{isShow}}">
  <view class="msg">{{msg}}</view>
  <input name="number" value="{{number}}" />
  <view class="students">...</view>
</block>

::: tip 提示: block 标签本身并不会被渲染到页面当中，它一般只用于分组控制内容的渲染