微信小程序WXML模板语法概述（微信小程序v-html）

本文提供了微信小程序的相关知识。 主要介绍wxml模板语法的相关内容，比如数据绑定、事件绑定、条件渲染、列表渲染等问题。 我们一起来看看吧。 我希望这对你有帮助。

【相关学习推荐：小程序学习教程】

WXML模板语法【k3】数据绑定一、数据绑定基本原理

①在data中定义数据

②WXML中数据的使用

2.用data

在与您的页面对应的 .js 文件中，将 Just 定义数据插入到数据对象中。

3. Mustache语法格式

data中的数据到页面渲染绑定并包装变量使用 Mustache 语法（双花括号）。 与vue中的插值表达式类似，语法格式为：

4. Mustache语法应用场景绑定内容绑定属性操作（三元运算、算术运算等）5.动态绑定内容

页面数据为：

页面结构如下：

6. 动态绑定属性

页面数据如下： 如下：接下来。

页面结构如下。

                                                                                                                    它变得更加高效。 算术运算

WXML 模板语法 - 事件绑定： 1. 什么是事件

事件是从渲染层到逻辑层的一种通信方法。 通过事件，渲染层的用户操作可以反馈到逻辑层进行业务处理。

2.小程序中常用的事件

类型

绑定方式

活动说明

点击

绑定点击或绑定：tap

手指触摸并快速离开，类似于 HTML 点击事件

输入

绑定输入或绑定：输入

文本框输入事件

更改

bindchange 或绑定：change

状态改变时触发

3.Event对象属性列表

当事件回调被触发时，Event对象接收事件，其详细属性如下表所示：

属性

类型

说明

类型

字符串

事件类型

时间戳

整数eger

打开页面到触发事件之间经过的毫秒数

目标

对象

>

触发事件的组件的一些属性值集合

当前目标

对象

当前组件的一些属性值集合

详细信息

对象

其他信息

<p style="margin-left:0in;text-align:center;"触摸

数组

触摸事件，当前屏幕上的触摸点信息数组

changedTouches

数组

触摸事件，当前修改的触摸点信息数组

4. target 和 currentTarget 的区别

Target is 触发是事件的源组件，currentTarget 是当前事件绑定到的组件，例如：

当单击内部按钮时，单击事件向外冒泡并触发外部视图的点击事件处理程序“margin-left:0in。 ;text-align:left;">此时外层视图：

1.target 指向触发事件的源组件。

2 .currentTarget 指的是当前触发事件的组件，因此，e.currentTarget 是当前视图组件。

5. Bindtap 语法形式

小程序中，HTML中没有onclick鼠标点击事件，而是通过Tap事件来响应用户的触摸行为。

①通过bindtap点击触摸 您可以将事件绑定到组件。语法为：

②定义页面.js文件对应的事件处理函数，并将事件参数设置为形参event （一般来说，e ). 接收：

6. 在事件处理函数

this.setData(dataObject) 方法中为数据赋值。

7. 传递事件参数

小程序中传递的事件。 参数是特殊的；您不能同时绑定到事件并将参数传递给事件处理函数，例如，以下代码将不起作用：小程序将bindtap 属性值视为事件名称，因此这是相同的。就像在

组件的 data-* 上调用 btnHandler(123) 一样。 您可以指定自定义属性参数，其中 * 代表参数名称。 >最终：

解析1条信息为参数名称

2 值2被解析为参数的值。

在事件处理函数中，可以传递event.target.dataset.parameter名称并获取其值。 具体的 示例代码如下：

8.bindinput 语法格式

小程序使用input事件响应文本框输入事件如下：

① 可以通过 BindingInput 将输入事件绑定到文本框：

② 在页面的.js文件中定义事件处理函数

9. 同步文本框和数据。 > 实现步骤：

①定义数据

②渲染结构

③ 美化样式

④ 绑定输入事件处理函数

定义数据：

渲染结构：

美化风格：

绑定输入事件处理程序：

WXML模板语法-条件渲染：1. mini In中的wx:if

你的程序，使用 wx:if="{{condition}}"。 要确定是否需要渲染代码块：

您还可以使用 wx:elif 和 wx:elif。 添加 else 判断 wx:else:

2 。 结合使用wx:if

如果想同时控制多个组件的可见性和可视性，可以将多个组件包装在一个标签中，并在标签上使用wx:if控制属性。 一个例子是：

注意：这不是一个组件，只是一个包装容器，不会在页面内呈现。

3.隐藏

在小程序中，直接使用hidden="{{condition }}":

4来控制元素可见性也可以。 wx:if与隐藏的比较

①操作方法的区别

1 wx:if显示和控制隐藏。 动态创建和删除元素并隐藏它们

2隐藏允许您切换样式控制显示和隐藏带有 (Screen: none/block;) 的元素

② 如何使用建议

1 如果您频繁切换，我们建议使用隐藏。

2 如果控制条件比较复杂，可以将wx:if与wx:elif和wx:else结合使用。

WXML 模板语法 - 列表渲染 1. wx:for

wx:for 允许您显示或隐藏基于数组的重复组件结构。 > 使用索引来表示当前循环项

2. 手动指定当前项的索引*

1. 您可以使用 wx:for-index 为当前循环项的索引指定变量名称。 >

2 wx:for -item 可用于指定当前项的变量名。

示例 代码如下：

3.在Vue列表中使用wx:key

。与渲染中的:key类似，小程序实现列表时也建议在渲染时为渲染的列表项指定唯一的key，这样可以提高渲染效率。 代码如下：

【相关学习推荐：小程序学习教程】

下载微信App

微信是一款支持通过手机网络发送语音消息、视频、照片和文字的移动通讯软件。 微信带来了全新的移动通信体验，您可以单独或群组聊天，还可以根据您的地理位置查找附近的人。 有需要的朋友，请快来保存您的下载体验吧！

这几篇文章你可能也喜欢：

• 总结分享微信小程序常见面试题（微信小程序面试题）
• 轻松分析微信小程序元素（微信小程序配置）
• 总结整理微信小程序的权限接口（微信小程序的权限管理在哪里）
• 微信小程序视图层详解（微信小程序视图层和逻辑层）
• 微信小程序页面路由知识总结（微信小程序路由）

本文由主机参考刊发，转载请注明：微信小程序WXML模板语法概述（微信小程序v-html） https://zhujicankao.com/141043.html