【小程序】-基础语法（二）

知识回顾

前言

微信小程序开发

一、模板语法

在页面中渲染数据时所用到的一系列语法叫做模板语法，对应到 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