【小程序】WXML模板语法

news2024/11/14 11:05:19

目录

数据绑定

数据绑定的基本原则

在data中定义页面的数据

Mustache语法的格式 

Mustache语法的应用场景

事件绑定 

什么是事件

小程序中常用的事件

事件对象的属性列表 

target和currentTarget的区别

bindtap的语法格式 

在事件处理函数中为data中的数据赋值

事件传参

bindinput的语法格式 

实现文本框和data之间的数据同步 

实现步骤:

条件渲染 

wx:if

结合 使用wx:if 

hidden

wx:if与hidden的对比

列表渲染 

wx:for 

手动指定索引和当前项的变量名

wx:key的使用


数据绑定

数据绑定的基本原则

  1. 在data中定义数据
  2. 在WXML中使用数据

在data中定义页面的数据

在页面对应的 .js文件中,把数据定义到data对象中即可:

那么我们如何在页面上使用数据呢?这里我们就需要使用小程序中的Mustache语法。

Mustache语法的格式 

把data中的数据绑定到页面中渲染,使用Mustache语法(双大括号)将变量包起来,语法格式为:

<view> { { 要绑定的数据名称 } } </view>

Mustache语法的应用场景

Mustache语法的主要应用场景如下:

  1. 动态绑定内容
  2. 动态绑定属性
  3. 运算(三元运算、算术运算等)

事件绑定 

什么是事件

事件是渲染层到逻辑层的通讯方式,通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。

小程序中常用的事件

类型绑定方式事件描述
tap

bindtap 或 bind:tap

手指触摸后马上离开,类似于HTML中的click事件
inputbindinput 或bind:input文本框的输入事件
changebindchange 或 bind:change状态改变时触发

事件对象的属性列表 

当事件回调触发的时候,会收到一个事件对象event,它的详细属性如下:

属性类型说明
typeString事件类型
timeStampInteger页面打开到触发事件所经过的毫秒数
targetObject触发事件的组件的一些属性值集合
currentTargetObject当前组件的一些属性值集合
detailObject额外的信息
touchesArray触摸事件,当前停留在屏幕中的触摸点信息的数组
changedTouchesArray触摸事件,当前变化的触摸点信息的数组

target和currentTarget的区别

target是触发该事件的源头组件,而currentTarget则是当前事件所绑定的组件,举例如下:

点击 内部的按钮时,点击事件以冒泡的方式向外扩散,也会触发外层view的tap事件处理函数。

此时对于外层的额view来说:

  • e.target 指向的时触发事件的源头组件,也就是上述情况的按钮组件
  • e.currentTarget 指向的是当前正在触发事件的那个组件,也就是e.currentTarget是当前的view组件

bindtap的语法格式 

1. 通过bindtap,可以为组件绑定tap触摸事件,语法如下:

<button type="primary" bindtap="btnTapHandler">按钮</button>

2. 在页面的 .js 文件中定义对应的事件处理函数,事件参数通过形参event(一般简写成e)来接收:

Page({

  btnTapHandler(e){

    console.log(e)

  }

})

在事件处理函数中为data中的数据赋值

通过调用this.setData(dataObject) 方法,可以给页面data中的数据重新赋值,示例如下:

Page({

  data: {

    count:0

  },

  btnTapHandler(e){

      this.setData({

        count:this.data.count+1

      })

  }

})

事件传参

小程序中的事件传参比较特殊,不能再绑定事件的同时为事件处理函数传递参数。因为小程序会把bindtap的属性值,统一当作事件名称来处理

我们可以为组件提供 data-* 自定义属性传参,其中 * 代表的是参数的名字,示例代码如下:

<button bindtap="btnTapHandler" data-info="{{2}}">按钮</button>

最终:

  • info会被解析为参数的名字
  • 数值2会被解析为参数的值

然后事件处理函数可以通过 e.target.dataset.数据名 获得参数值 

bindinput的语法格式 

在小程序中,通过input事件来响应文本框的输入事件,语法格式如下:

1. 通过bindinput,可以为文本框绑定输入事件:

<input bindinput="inputHandler"></input>

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

inputHandler(e){

   console.log(e.detail.value)

 }

//e.detail.value是变化过后吗,文本框最新的值

实现文本框和data之间的数据同步 

实现步骤:
  1. 定义数据
    Page({
      data: {
        msg:'你好,'
      }
    })
  2. 渲染结构
    <input value="{{msg}}" bindinput="inputHandler"></input>
  3. 美化样式
    input{
      border: 1px solid #eee;
      padding:5px;
      margin: 5px;
      border-radius: 3px;
    }
  4. 绑定input事件的处理函数
     inputHandler(e){
       this.setData({
         msg:e.detail.value
       })
     }

条件渲染 

wx:if

在小程序中,使用wx:if="{{condition}}" 来判断是否需要渲染该代码块:

<view wx:if="{{condition}}">True</view>

也可以用 wx:elifwx:else 来添加 else 判断

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

结合<block> 使用wx:if 

如果一次性控制多个组件的展示与隐藏,可以使用一个<block></block> 标签将多个组件包装起来,<block>标签使用wx:if 控制属性,示例如下:

<block wx:if="{{true}}">
  <view>1</view>
  <view>1</view>
</block>

hidden

在小程序中,直接使用 hidden=”{{condition}}“ 也能控制元素的显示与隐藏

condition为true时隐藏,否则显示,代码与wx:if类似,这里不再演示。

wx:if与hidden的对比

1. 运行方式不同

  • wx:if以动态创建和一处元素的方式,控制元素的展示与隐藏
  • hidden以切换样式的方式(display:none/block;),控制元素的显示与隐藏

2. 使用建议

  • 频繁切换时,建议使用hidden
  • 控制条件比较复杂,建议使用wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换

列表渲染 

wx:for 

通过 wx:for  可以根据指定的数组,循环渲染重复的组件结构,语法示例如下:

<view wx:for="{{array}}">
  索引时:{{index}},item项时{{item}}
</view>

默认情况下,当前循环项的索引用index表示,当前循环项用item表示 

手动指定索引和当前项的变量名

  • 使用wx:for-index 可以指定当前循环项的索引的变量名
  • 使用wx:for-item 可以指定当前项的变量名
<view wx:for="{{array}} wx:for-index="idx" wx:for-item="itemName">
  索引时:{{idx}},item项时{{itemName}}
</view>

wx:key的使用

类似于Vue列表渲染中的 :key ,小程序在实现列表渲染时,也建议为渲染出来的列表项指定唯一的key值,从而提高渲染的效率,示例代码如下:

<view wx:for="{{array}} wx:key="index">

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【linux】进程控制——进程创建,进程退出,进程等待

个人主页&#xff1a;东洛的克莱斯韦克-CSDN博客 祝福语&#xff1a;愿你拥抱自由的风 相关文章 【Linux】进程地址空间-CSDN博客 【linux】详解linux基本指令-CSDN博客 目录 进程控制概述 创建子进程 fork函数 父子进程执行流 原理刨析 常见用法 出错原因 进程退出 概…

【Linux】进程6——环境变量

1.什么是环境变量 环境变量(environment variables)一般是指在操作系统中用来指定操作系统运行环境的一些参数 比如&#xff1a;我们在编写C/C代码的时候&#xff0c;在链接的时候&#xff0c;从来不知道我们的所链接的动态静态库在哪里&#xff0c;但是照样可以链接成功&…

TalkingData 是一家专注于提供数据统计和分析解决方案的独立第三方数据智能服务平台

TalkingData 是一家专注于提供数据统计和分析解决方案的独立第三方数据智能服务平台。通过搜索结果&#xff0c;我们可以了解到 TalkingData 的一些关键特性和市场情况&#xff0c;并将其与同类型产品进行比较。 TalkingData 产品特性 数据统计与分析&#xff1a;提供专业的数…

Pulsar 社区周报 | No.2024-06-07 | Apache Pulsar 新分支 3.3 版本发布

“ 各位热爱 Pulsar 的小伙伴们&#xff0c;Pulsar 社区周报更新啦&#xff01;这里将记录 Pulsar 社区每周的重要更新&#xff0c;每周发布。 ” 本期主题&#xff1a;Apache Pulsar 新分支 3.3 版本发布 Apache Pulsar 新分支 3.3 版本发布&#xff1a;Apache Pulsar 3.3.0[1…

野花野草80种 ,依然是农村小时候的印象

【野花野草】 小时候&#xff0c;不论在山上、在田里、还是在路边&#xff0c;总能看到各种各样的小花小草&#xff0c;或外表相似&#xff0c;或独具特色&#xff0c;而它们的名字似乎总是一个谜。今天我们就盘点一下这些叫不出名字的植物吧&#xff0c;或许&#xff0c;还能…

USB (3)

USB 流控 USB是polled bus,这和PCIe不一样,所有的transfer都是由host发起的。 对于IN(从device到host)。 如果device没有数据,那么只能回复NAK。 Token received corrupted

MySQL之查询性能优化(八)

查询性能优化 MySQL查询优化器的局限性 MySQL的万能"嵌套循环"并不是对每种查询都是最优的。不过还好&#xff0c;MySQL查询优化器只对少部分查询不适用&#xff0c;而且我们往往可以通过改写查询让MySQL高效地完成工作。还有一个好消息&#xff0c;MySQL5.6版本正…

GEE训练教程——如何确定几何形状的中心点坐标和相交的坐标

简介 在GEE中&#xff0c;可以使用.geometry()方法来获取几何形状的中心点坐标和相交的坐标。 首先&#xff0c;使用.geometry()方法获取几何形状的几何信息&#xff0c;然后使用.centroid()方法获取几何形状的中心点坐标。示例代码如下&#xff1a; // 获取几何形状的中心点…

ChatGP和kimi对比

使用关于歌手李健的一些问答&#xff0c;进行对比。整体感觉CharGPT更严谨。 ChatGPT kimi [ { “role”: “system”, “content”: “你是 Kimi&#xff0c;由 Moonshot AI 提供的人工智能助手&#xff0c;你更擅长中文和英文的对话。你会为用户提供安全&#xff0c;有帮助…

深度学习与人工智能

深度学习&#xff0c;是一种特殊的人工智能&#xff0c;他与人工智能及机器学习的关系如下&#xff1a; 近些年来&#xff0c;基于人工神经网络的机器学习算法日益盛行起来&#xff0c;逐渐呈现出取代其他机器学习算法的态势&#xff0c;这主要的原因是因为人工神经网络中有一中…

【面试干货】 B 树与 B+ 树的区别

【面试干货】 B 树与 B 树的区别 1、B 树2、 B 树3、 区别与优缺点比较4、 总结 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在数据库系统中&#xff0c;B 树和 B 树是常见的索引结构&#xff0c;它们在存储和组织数据方面有着不同的设计…

Nginx之正向代理配置示例和说明

一、NGINX正向代理功能简介 Nginx的正向代理功能允许局域网中的客户端通过代理服务器访问Internet资源。具体来说&#xff0c;Nginx作为一种流行的Web服务器和反向代理服务器&#xff0c;在正向代理方面的应用也相当实用。以下是其正向代理功能的几个关键点&#xff1a; 访问外…

【Linux】匿名管道的应用场景 --- 进程池

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前正在学习c和算法 ✈️专栏&#xff1a;Linux &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章有啥瑕疵&#xff0c;希望大佬指点一二 如果文章对…

Makefile:从零开始入门Makefile

目录 1.前言 2.Makefile的简单介绍 3.Makefile中的指令规则 4.Makefile的执行流程 5.Makefile中的变量类型 6.Makefile中的模式匹配 7.Makefile中的函数 8.Makefile补充知识 前言 在Linux中编译CPP文件&#xff0c;我们能够使用GCC命令进行编译&#xff0c;但当项目文件多且繁杂…

OpenGauss数据库-5.数据更新

第1关&#xff1a;插入数据 gsql -d postgres -U gaussdb -W "passwd123123" create table student (id integer primary key,name char(20),age integer ); insert into student values(1,"lily",20),(2,lily,21),(3,marry,19); 第2关&#xff1a;删除数…

C51学习归纳9 --- I2C通讯学习(重点)

首先&#xff0c;我自己学习过以后的直观感觉&#xff0c;通信协议是单片机的灵魂之一&#xff0c;只有规定好了通信协议我们才能够正确的接收到信息&#xff0c;才能实现更加深入的研究。所以这一部分是需要好好学习的。 本节借助一个可存储的芯片AT24C02&#xff0c;进行在I2…

仿饿了么的谁去拿外卖游戏源码

源码介绍 喝酒 没有游戏玩&#xff1f; 懒得下床 不想出去 那么好 这个游戏会 满足你! 玩法 每人都选择一个序号 4 个人为例 张三选第 ① 李四选第 ② 王五选第 ③ 赵前选第 ④ 然后就按 4 下 其中最小的数对应的序号就是他输了就去拿外卖&#xff01; 源码下载 仿饿了么…

快速开始一个go程序(极简-快速入门)

一、 实验介绍 1.1 实验简介 为了能更高效地使用语言进行编码&#xff0c;Go 语言有自己的哲学和编程习惯。Go 语言的设计者们从编程效率出发设计了这门语言&#xff0c;但又不会丢掉访问底层程序结构的能力。设计者们通过一组最少的关键字、内置的方法和语法&#xff0c;最终…

IDEA创建SpringBoot项目的时候,如何使用Java8,怎么办?

在创建springboot项目的时候,IDEA提示&#xff0c;最低Java版本要求17&#xff0c;但是实际上我们可能不需要这么高的版本&#xff0c;怎么使用Java8呢&#xff1f; 解决办法 修改Server URL地址即可&#xff1a;https://start.aliyun.com

【PHP【实战训练】系统性学习】——最经典的web端头像上传,数据库内容安全精简

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…