小程序中的模版语法

模板语法

今天我们来介绍一下小程序中的模版语法！！！

1. 声明和绑定数据

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

在将数据声明好以后，需要在 WXML 中绑定数据，数据绑定最简单的方式是使用 Mustache 语法（双大括号）将变量包起来。

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

1. 算数运算

2. 三元运算

3. 逻辑判断

4. 其他…

📌 注意事项：

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

定义数据：

Page({
   
   
  // 页面的初始数据
  data: {
   
   
    num: 1
  }
    
  // coding...
}

使用数据：

➡️ pages/index/index.wxml

<!-- 如果需要展示数据，在 wxml 中需要使用双大括号写法将变量进行包裹 -->

<!-- 展示内容 -->
<view>{
  
  { school }}</view>
<view>{
  
  { obj.name }}</view>

<!-- 绑定属性值，如果需要动态绑定一个变量，属性值也需要使用双大括号进行包裹 -->
<view id="{
    
    { id }}">绑定属性值</view>

<!-- 如果属性值是布尔值，也需要使用双大括号进行包裹 -->
<checkbox checked="{
    
    { isChecked }}" />

<!-- 算术运算 -->
<view>{
  
  { id + 1 }}</view>
<view>{
  
  { id - 1 }}</view>

<!-- 三元运算 -->
<view>{
  
  { id === 1 ? '等于' : '不等于' }}</view>

<!-- 逻辑判断 -->
<view>{
  
  { id === 1 }}</view>

<!-- 在双大括号写法内部，只能写表达式，不能写语句，也不能调用 js 的方法 -->
<!-- <view>{
   
   { if (id === 1) {} }}</view> -->
<!-- <view>{
   
   { for (const i = 0; i <= 10; i++) {} }}</view> -->
<view>{
  
  { obj.name.toUpperCase() }}</view>

➡️ pages/index/index.js

// index.js
Page({
   
   

  // 在小程序页面中所需要使用的数据均来自于 data 对象
  data: {
   
   
    id: 1,
    isChecked: false,
    school: '尚硅谷',
    obj: {
   
   
      name: 'tom'
    }
  }

})
     

2. 声明和修改数据

小程序中修改数据并不能直接进行赋值，而是要通过调用 this.setData 方法才能实现

将需要修改的数据以 key:value 的形式传给 this.setData 方法。

this.setData 方法有两个作用：

1. 更新数据
2. 驱动视图更新

Page({
   
   
  // 页面的初始数据
  data: {
   
   
    num: 1
  },

  updateNum() {
   
   
    this.setData({
   
   
      // key 是需要修改的数据
      // value 是最新值
      num: this.data.num + 1
    })
  }
 
  // coding...
}

3. setData-修改对象类型数据

在实际开发中，我们经常会在 data 中声明对象类型的数据，小程序中通过调用 setData 方法可以修改页面的数据，包括对象类型的数据。下面是修改对象类型数据的方法：

1. 定义一个对象

   Page({
        
        
     // 定义页面中使用的数据