福建省住房和建设网站西宁网站建设维护

---

知识回顾

前言

微信小程序开发

一、模板语法

在页面中渲染数据时所用到的一系列语法叫做模板语法，对应到 Vue 中就是指令的概念。

2.1 数据绑定

• 插值 {{}}

  小程序中使用 {{}} 实现数据与模板的绑定，与 Vue 中不同的是无论是属性的绑定还是内容的绑定都必须要使用 {{}}。

  <!-- 此处的 false 是字符串的 'false'，因此布尔结果为 true -->
  <switch checked="false" />
  <!-- 如下才是正确表示布尔值 false 的方法 -->
  <switch checked="{{false}}" />
  

• 简易数据绑定

  小程序中提供了 model:value="{{数据名}}" 语法来实现双向的数据绑定，但是目前只能用在 input 和 textarea 组件中。

本节中用到的演示代码如下：

<!-- 数据绑定 -->
<view class="binding"><!-- 开关组件 --><switch checked="{{isOpen}}"/><!-- 双向数据绑定 --><input type="text" model:value="{{message}}" /><view class="message">{{message}}</view>
</view>

Page({data: {isOpen: true,message: 'hello world!'}
})

2.2 条件渲染

• 控制属性：相当于 Vue 中指令的概念，在小程序中做控制属性
  • wx:if 根据表达式的值渲染内容，值为真时显示
  • wx:else 用在 wx:else 的后面，不可单独使用，wx:if 表达式值为假时显示
• 组件属性：
  • hidden 根据表达式的值渲染内容，值为真时隐藏
  • 通过 [hidden] { display: none; } 来实现内容的隐藏

本节中用到的演示代码如下：

<!-- 条件渲染 wx:if 和 wx:else -->
<view class="welcome"><text wx:if="{{isLogin}}">大师兄</text><text wx:else>游客</text>你好:
</view><!-- 条件渲染 hidden -->
<view class="loading"><!-- 可以单独使用 --><!-- <text wx:if="{{!loaded}}">正在加载...</text> --><text hidden="{{loaded}}">正在加载...</text>
</view>

Page({data: {isOpen: true,message: 'hello world!',isLogin: true,loaded: false}
})

2.3 列表渲染

• wx:for 根据数组重复渲染组件内容
  • index 默认值，访问数组的索引值
  • item 默认值，访问数组的单元值
• wx:key 列表项的唯一标识符（不使用 {{}}）
  • 数组单元是对象时，只需要写属性名
  • 数组单元是简单类型时，推荐使用 *this
• wx:for-index 自定义访问数组索引的变量名
• wx:for-item 自定义访问数组单元的变量名

本节中用到的演示代码如下：

<!-- 列表渲染 -->
<view class="students"><view class="item"><text>序号</text><text>姓名</text><text>年龄</text><text>性别</text><text>级别</text></view><view class="item"><text>1</text><text>贺洋</text><text>20</text><text>男</text><text>菜鸟</text></view>
</view>
<!-- 简单数组 -->
<view class="history"><text>小米</text