小程序中的模版语法

模板语法

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

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({// 定义页面中使用的数据data: {userInfo: {name: 'Tom',age: 10,gender: '男'}}
}

  2. 修改对象中的单个属性：

    this.setData({'userInfo.name': 'Jerry'
})

  3. 修改对象中的多个属性

    // 修改对象中的多个属性
this.setData({'userInfo.name': 'Jerry','userInfo.age': 100
})

  4. 使用 ES6 的展开运算符

    在修改对象类型的数据时，可以使用 ES6 的展开运算符先复制对象，然后利用新值对旧值覆盖的方式修改

    const userInfo = {...this.data.userInfo,name: 'Jerry',age: 100
}// 修改对象中的多个属性
this.setData({userInfo
})

  5. 使用解构赋值修改对象属性

    在修改对象类型的数据时，可以使用解构赋值来修改对象属性

    // 将 userInfo 从 data 中进行解构
const { userInfo } = this.data
// 产生一份新数据
const newUserInfo = {...userInfo,name: 'Jerry',age: 100
}
// 修改对象中的多个属性
this.setData({userInfo: newUserInfo
})

  6. 使用 Object.assign 方法合并对象

    在修改对象类型的数据时，可以使用 Object.assign 方法将多个对象合并为一个对象

    // 使用 Object.assign 方法将多个对象合并为一个对象
const userInfo = Object.assign(this.data.userInfo, { name: 'Jerry' },{ age: 100 }
)// 修改对象中的多个属性
this.setData({userInfo
})

  7. 删除对象中的属性

    在删除对象中的属性时，不能使用 delete 操作符，因为小程序的数据绑定机制不支持监听 delete 操作

    // 使用展开运算符拷贝一份数据，产生一个新对象
const newUser = { ...this.data.userInfo }
// 使用 delete 删除新对象中的属性
delete newUser.agethis.setData({// 将新的对象进行赋值userInfo: newUser
})

📌 注意事项：

小程序的数据绑定机制只能监听到 setData 方法中修改的数据，无法监听到直接删除属性的操作，所以在删除对象属性时，需要先将对象复制一份再进行操作，然后再调用 setData 方法更新数据。

4. setData-修改数组类型数据

数组类型数据也是经常会使用的数据格式之一，下面是修改数组类型数据的方法：

  1. 定义一个数组

    Page({// 定义页面中使用的数据data: {animalList: ['Tom', 'Jerry', 'Spyke']}// coding...
}

  2. 使用数组的 concat 方法合并数组

    在修改数组类型的数据时，可以使用数组的 concat 方法来合并数组

    // 使用 concat 方法来合并数组
const newList = this.data.animalList.concat('Tyke')// 使用 setData 进行赋值
this.setData({animalList: newList
})

  3. 使用数组的 push 方法新增属性

    在修改数组类型的数据时，可以使用数组的 push 方法来添加元素

    // 使用数组的 push 方法来添加元素
this.data.animalList.push('Tyke')// 使用 setData 进行赋值
this.setData({animalList: this.data.animalList
})

  4. 使用 ES6 的展开运算符

    在数组类型的数据时，可以使用 ES6 的展开运算符先复制数组，然后进行合并

    // 使用 ES6 的展开运算符先复制数组，然后进行合并
const newList = [...this.data.animalList, 'Tyke']// 使用 setData 进行赋值
this.setData({animalList: newList
})

  5. 修改数组中某个元素的值：

    利用索引的方式进行修改，但必须使用 wx:for 来进行渲染数组，否则会出现错误

    this.setData({'animalList[2]': 'Tyke' 
})

  6. 使用数组的 filter 方法删除元素

    在修改数组类型的数据时，可以使用数组的 filter 方法来删除元素

    // 使用数组的 filter 方法来删除元素
const newList = this.data.animalList.filter(item => item !== 'Tom')// 使用 setData 进行赋值
this.setData({animalList: newList
})

5. 数据绑定-简易双向绑定

在 WXML 中，普通属性的绑定是单向的，例如：

<input value="{{ num }}" />

如果使用 this.setData 来更新 num ，num 和输入框的中显示的值都会被更新为值。但如果用户修改了输入框里的值，却不会同时改变 data 中的 num 。

如果需要在用户输入的同时也将 data 中的数据修改 ，需要借助简易双向绑定机制。此时可以在对应项目之前加入 model: 前缀即可，例如：

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

如果使用 this.setData 来更新 num ，num 和输入框的中显示的值都会被更新为值。

如果输入框的值被改变了， data 的数据也会随着改变。

同时， WXML 中所有绑定了数据的位置也会被一同更新

📌 注意事项：

简易双向绑定的属性值如下限制：

  1. 只能是一个单一字段的绑定，例如：错误用法：

  2. 尚不能写 data 路径，也就是不支持数组和对象，例如：错误用法：

落地代码：

<!-- 单向绑定：数据能够影响页面，但是页面更新不会影响到数据 -->
<!-- <input type="text" value="{{ value }}" /> --><!-- 双向绑定：数据能够影响页面，页面更新也能够影响数据 -->
<!-- 如果想实现简易双向绑定，需要再对应的属性之前添加 model: -->
<!-- <input type="text" model:value="{{ value }}" /> --><!-- 如果需要获取复选框的选中效果，需要给 checked 添加 model: -->
<checkbox model:checked="{{ isChecked }}" /> 是否同意该协议<!-- 注意事项1：属性值只能是一个单一字段的绑定 -->
<!-- <input type="text" model:value="值为 {{ value }}" /> --><!-- 注意事项2：属性值不能写数据路径，也就是不支持对象和数组 -->
<!-- <input type="text" model:value="{{ obj.value }}" /> -->

6. 列表渲染-基本使用

基本使用

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

只需要在组件上使用 wx:for 属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件

默认数组当前项的变量名默认为 item

默认数组的当前项的下标变量名默认为 index

在使用 wx:for 对数组进行遍历的时候，建议加上 wx:key 属性，如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，即以后数据不会改变，或者不必关注其顺序，可以选择忽略。

wx:key 的值以两种形式提供：

  1. 字符串：代表需要遍历的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变
  2. 保留关键字 *this 代表在 for 循环中的 item 本身，当 item 本身是一个唯一的字符串或者数字时可以使用

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且 提高列表渲染时的效率 。

📌 注意事项：

​ 在使用 wx:for 对数组进行遍历的时候，建议加上 wx:key 属性，否则控制台会报警告

落地代码：

<!-- 如果需要进行列表渲染，需要使用 wx:for 属性 -->
<!-- 属性值需要使用双大括号进行包裹 -->
<!-- 每一项的变量名默认是 item -->
<!-- 每一项下标（索引）的变量名默认是 index --><!-- 如果渲染的是数组，item：数组的每一项，index：下标 -->
<!-- <view wx:for="{{ numList }}">{{ item }} - {{ index }}</view> --><!-- 如果渲染的是对象，item：对象属性的值，index：对象属性 -->
<!-- <view wx:for="{{ obj }}">{{ item }} - {{ index }}</view> --><!-- ------------------------ 关于 Key --------------------------------- --><!-- wx:key 提升性能 -->
<!-- wx:key 的属性值不需要使用双大括号进行包裹，直接写遍历的数组 中 item 的某个属性 --><!-- wx:key 属性值有两种添加形式 -->
<!-- 字符串，需要是遍历的数组 中 item 的某个属性，要求该属性是列表中唯一的字符串或者数字，不能进行动态改变 -->
<view wx:for="{{ fruitList }}" wx:key="id">{{ item.name }}</view>
<view wx:for="{{ fruitList }}" wx:key="index">{{ item.name }}</view><!-- 保留关键字 *this，*this 代表的是 item 本身，item 本身是唯一的字符串或者数字 -->
<view wx:for="{{ numList }}" wx:key="*this">{{ item }}</view>
// profile.js
Page({data: {numList: [1, 2, 3],fruitList: [{ id: 1, name: '🍎', price: 66 },{ id: 2, name: '🍋', price: 77 },{ id: 3, name: '🍅', price: 88 }],obj: {name: 'tom',age: 10}}})

7. 列表渲染-使用进阶

修改默认下标和变量名：

如果需要对默认的下标和变量名进行修改，可以使用 wx:for-item 和 wx:for-index

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

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

<view wx:for="{{ animal }}" wx:for-item="itemName" wx:for-index="i">{{ itemName.name }} - {{ itemName.avatar }} - {{ i }}
</view>

渲染多节点结构块：

如果需要渲染一个包含多节点的结构块，可以使用一个 <block/> 标签将多个组件包装起来

<block wx:for="{{ animal }}"><view><span>{{ item.name }}</span><span>{{ item.avatar }}</span></view>
</block>

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

8. 条件渲染

知识点：

条件渲染主要用来控制页面结构的展示和隐藏，在微信小程序中实现条件渲染有两种方式：

  1. 使用 wx:if、wx:elif、wx:else 属性组
  2. 使用 hidden 属性
<view wx:if="{{condition}}"> True </view>

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view

<view hidden="{{condition}}"> True </view>

wx:if 和 hidden 二者的区别：

  • wx:if ：当条件为 true 时将内容渲染出来，否则元素不会进行渲染，通过移除/新增节点的方式来实现
  • hidden ：当条件为 true 时会将内容隐藏，否则元素会显示内容，通过 display 样式属性来实现的

落地代码：

<!-- 使用 wx:if、wx:elif、wx:else 属性组控制元素的隐藏和控制 -->
<view wx:if="{{ num === 1 }}">num 等于 {{ num }}</view>
<view wx:elif="{{ num === 2 }}">num 等于 {{ num }}</view>
<view wx:else>大于 2</view><view hidden="{{ num !== 1 && num !== 2 && num !== 3 && num < 3}}">{{ num < 3 ? 'num 等于' + num : '大于 2' }}
</view><button type="primary" bindtap="updateNum">修改数据</button>
Page({// 页面的初始数据data: {num: 1},// 更新数据updateNum() {this.setData({num: this.data.num + 1})}// coding...
}

以上资料均来自于网络，希望对大家有所帮助！！！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/26422.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Mysql中使用where 1=1有什么问题吗

Mysql中使用where 1=1有什么问题吗

昨天偶然看见一篇文章&#xff0c;提到说如果在mysql查询语句中&#xff0c;使用where 11会有性能问题&#xff1f;&#xff1f; 这着实把我吸引了&#xff0c;因为我项目中就有不少同事&#xff0c;包括我自己也有这样写的。为了不给其他人挖坑&#xff0c;赶紧学习一下&…
阅读更多...
ABAP调用JavaScript进行幂乘运算

ABAP调用JavaScript进行幂乘运算

ECC版本没有内置的ipow运算函数&#xff0c;所以需要进行幂乘运算的话&#xff0c;可以采用调用JavaScript的方式来实现&#xff0c;参考代码如下&#xff1a;
阅读更多...
集合java

集合java

1.集合 ArrayList 集合和数组的优势对比&#xff1a; 长度可变 添加数据的时候不需要考虑索引&#xff0c;默认将数据添加到末尾 package com.itheima;import java.util.ArrayList;/*public boolean add(要添加的元素) | 将指定的元素追加到此集合的末尾 | | p…
阅读更多...
策略迭代和值迭代的定义和区别

策略迭代和值迭代的定义和区别

策略迭代&#xff08;Policy Iteration&#xff09;和值迭代&#xff08;Value Iteration&#xff09;是强化学习中常用的两种经典算法&#xff0c;用于解决马尔可夫决策过程&#xff08;MDP&#xff09;中的最优策略。它们之间的主要区别在于算法的迭代方式和更新策略的顺序。…
阅读更多...
Chrome/Edge浏览器视频画中画可拉动进度条插件

Chrome/Edge浏览器视频画中画可拉动进度条插件

目录 前言 一、Separate Window 忽略插件安装&#xff0c;直接使用 注意事项 插件缺点 1 .无置顶功能 2.保留原网页&#xff0c;但会刷新原网页 3.窗口不够美观 二、弹幕画中画播放器 三、失败的尝试 三、Potplayer播放器 总结 前言 平时看一些视频的时候&#xff…
阅读更多...
Jtti：ubuntu文件系统根目录磁盘空间不足怎么办

Jtti：ubuntu文件系统根目录磁盘空间不足怎么办

当Ubuntu文件系统的根目录磁盘空间不足时&#xff0c;可以采取以下步骤来解决问题&#xff1a; 1. 清理不必要的文件 删除临时文件&#xff1a;清理/var/tmp、/tmp等目录中的临时文件。 清理日志文件&#xff1a;删除/var/log目录下的旧日志文件或使用日志轮转工具。 删除缓…
阅读更多...
Linux——自动化运维ansibe

Linux——自动化运维ansibe

一、自动化运维定义 自动化--- 自动化运维&#xff1a; 服务的自动化部署操作系统的日常运维&#xff1a;日志的备份、临时文件清理、服务器日常状态巡检、&#xff08;几乎包括了linux服务管理、linux 系统管理以及在docker 容器课程中涉及的所有内容&#xff09;服务架构的…
阅读更多...
maven学习小结

maven学习小结

背景 大佬指路我负责实践 目录结构 maven为项目提供一个标准目录结构 环境配置 下载maven包后解压&#xff0c;配置解压目录的bin到path变量&#xff0c;然后终端mvn -v&#xff0c;有回显则表明maven安装成功 pom POM&#xff0c;Project Object Model&#xff0c;项目对…
阅读更多...
01_简单信号的连续和离散形式（2）

01_简单信号的连续和离散形式（2）

1. 单位阶跃信号 1.1离散 离散单位阶跃信号&#xff0c;也称为单位阶跃序列&#xff0c;是一个在离散时间信号分析中基础且重要的信号&#xff0c;用于描述在某个时间点后信号值发生突变的情形。它的定义如下&#xff1a; 离散单位阶跃信号具有以下几个重要性质和应用&#x…
阅读更多...
Django中使用下拉列表过滤HTML表格数据

Django中使用下拉列表过滤HTML表格数据

在Django中&#xff0c;你可以使用下拉列表&#xff08;即选择框&#xff09;来过滤HTML表格中的数据。这通常涉及两个主要步骤&#xff1a;创建过滤表单和处理过滤逻辑。 创建过滤表单 首先&#xff0c;你需要创建一个表单&#xff0c;用于接收用户选择的过滤条件。这个表单可…
阅读更多...
【CT】LeetCode手撕—21. 合并两个有序链表

【CT】LeetCode手撕—21. 合并两个有序链表

目录 题目1-思路2- 实现⭐21. 合并两个有序链表——题解思路 3- ACM实现 题目 原题连接&#xff1a;21. 合并两个有序链表 1-思路 双指针&#xff1a;题目提供的 list1 和 list2 就是两个双指针 通过每次移动 list1 和 list2 并判断二者的值&#xff0c;判断完成后将其 插入…
阅读更多...
IDEA项目上传Github流程+常见问题解决

IDEA项目上传Github流程+常见问题解决

一、Github上创建仓库 项目创建好后如图所示 二、IDEA连接Github远程仓库 管理远程 复制远程地址 定义远程 登录Github 点击进入File->Settings->Version Control->Github登录自己的账号并勾上“√” 三、推送项目 点击推送 修改为main 点击确定&#xff0c;打开远程…
阅读更多...
编辑并保存hosts文件

编辑并保存hosts文件

1.以管理员权限打开cmd 2.执行命令 notepad C:\Windows\System32\drivers\etc\hosts 回车后会通过记事本打开hosts文件&#xff0c;然后就可以编辑并保存了。
阅读更多...
pdf添加书签的软件，分享3个实用的软件！

pdf添加书签的软件，分享3个实用的软件！

在数字化阅读日益盛行的今天&#xff0c;PDF文件已成为我们工作、学习和生活中不可或缺的一部分。然而&#xff0c;面对海量的PDF文件&#xff0c;如何高效地进行管理和阅读&#xff0c;成为了许多人关注的焦点。其中&#xff0c;添加书签功能作为提高PDF文件阅读体验的重要工具…
阅读更多...
算法设计与分析复习（第6章 分枝限界法）

算法设计与分析复习（第6章 分枝限界法）

7-1 最佳调度问题 #include<iostream> #include<algorithm> using namespace std; int n,k,t[99],ans[99],min_time0x3f3f3f3f; void dfs(int level) { if(leveln) {int tmp*max_element(ans,ansn);if(tmp<min_time) min_timetmp;return; } for(int i0;i<k;…
阅读更多...
GStreamer编译安装——使用Meson从源代码编译

GStreamer编译安装——使用Meson从源代码编译

使用Meson从源代码编译 如果您只想使用GStreamer&#xff0c;请访问下载页面。 我们为Windows、macOS、Android和iOS提供预构建的二进制文件。 对于希望处理GStreamer代码本身和/或修改它的开发人员&#xff0c;或者希望快速尝试尚未在GStreamer正式版本中的功能的应用程序开…
阅读更多...
使用adb通过wifi连接手机

使用adb通过wifi连接手机

1&#xff0c;手机打开开发者模式&#xff0c;打开无线调试 2&#xff0c;命令行使用adb命令配对&#xff1a; adb pair 192.168.0.102:40731 输入验证码&#xff1a;422859 3&#xff0c;连接设备&#xff1a; adb connect 192.168.0.102:36995 4&#xff0c;查看连接状态:…
阅读更多...
海思Ascend精度分析详细操作指南

海思Ascend精度分析详细操作指南

1.简介 海思平台在转模型量化时经常需要精度分析，可以参考官方文档《精度比对工具使用指南.pdf》，但是里面的一些细节描述还是不清楚，因此本文详细描述了精度分析对比的操作指南，方便新手入门。 2.对原始未量化的onnx模型进行dump 说明：原始模型为caffe的dump方法参考之…
阅读更多...
C++Qt做一个鼠标在按钮上悬浮3s显示一个悬浮窗口

C++Qt做一个鼠标在按钮上悬浮3s显示一个悬浮窗口

当你想要在 Qt 中创建一个自定义按钮并添加悬浮窗口的功能时&#xff0c;你可以通过继承 QPushButton 类来实现。下面是一个示例代码&#xff0c;演示了如何创建一个自定义按钮类 HoverButton&#xff0c;并在鼠标悬浮在按钮上 3 秒后显示一个悬浮窗口&#xff0c;窗口包含图片…
阅读更多...
GIGE 协议摘录 —— 照相机的标准特征列表（五）

GIGE 协议摘录 —— 照相机的标准特征列表（五）

系列文章目录 GIGE 学习笔记 GIGE 协议摘录 —— 设备发现&#xff08;一&#xff09; GIGE 协议摘录 —— GVCP 协议&#xff08;二&#xff09; GIGE 协议摘录 —— GVSP 协议&#xff08;三&#xff09; GIGE 协议摘录 —— 引导寄存器&#xff08;四&#xff09; GIGE 协议…
阅读更多...
最新文章

Copyright @ 2022~2023