微信小程序数据传递的方式-页面数据的存取

        我们在把数据显示到页面的时候,为了实现良好的互动,都希望在用户点击某个栏目后,获取这个栏目的捆绑数据,然后执行后续的操作。

        例如,从数据库里取出对应的记录后,显示在页面上,是一条条的大横条,用户点击某个横条的时候,就是选择了某条记录,此时在js端,就希望能获取用户点击的是哪条记录,并且这个记录的各个字段从页面直接搬过来,不用重新到数据库去查询了。

        这里就要用到页面控件的“data-*”属性了,显示页面数据时,把数据记录显示在控件的各个data-*属性中,需要的时候就从页面这些data-*属性里取出来。

        例如,我要把device_id变量的值存入页面中,就可以写成:

        <view data-deviceid="{{device_id}}" bindtap="onBarTap">点击获取数据</view>

        获取的时候,在js里写:

        onBarTap(e){

                var deviceId=e.target.dataset.deviceid;               //获取对应data-deviceid的存放数据

        }

        这样就可以获取data-deivceid里这个deviceid数据了,要注意的是,取出来的时候要注意去掉“data-”前缀。当然这里的“{{device_id}}”里的device_id必须是在js里的Page里的data要先赋值。

        接下来给个简单的page做参考,例如新建demo页面,demo.wxss和demo.json都默认,我们只是参考demo.wxml和demo.js两个源码。

        =============================================================

demo.xml:

<!--pages/index/demo.wxml-->
<text>pages/index/demo.wxml</text>
<view><button data-itemId="{{item_id}}" bindtap="getdata">获取数据</button>
</view>

demo.js

// pages/index/demo.js
Page({data: {item_id:"DEVICE_000302938049898",        //给item_id先赋个值},onLoad: function (options) {},getdata:function(e){console.log(e.target.dataset.itemid);    //从页面取出来,去掉前缀},
})

        这样第9行显示的结果就是:DEVICE_000302938049898

        总结,存:是利用js的公用数据data段的赋值,直接刷新显示;取:是利用js里的传递过来的event,就是上面的e,里面的e.target.dataset.xxxx来获取,要去掉data-前缀。

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

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

相关文章

企业计算机服务器中了faust勒索病毒怎么办,faust勒索病毒解密文件恢复

网络技术的不断应用发展&#xff0c;为企业注入了新的生产运营方式&#xff0c;计算机服务器为企业的数据存储提供了便利&#xff0c;让企业的生产运营得到了有力保障&#xff0c;近期&#xff0c;云天数据恢复中心陆续接到很多企业的求助&#xff0c;企业的计算机服务器遭到了…

基于单片机设计的电子指南针(LSM303DLH模块(三轴磁场 + 三轴加速度)

一、前言 本项目是基于单片机设计的电子指南针&#xff0c;主要利用STC89C52作为主控芯片和LSM303DLH模块作为指南针模块。通过LCD1602液晶显示屏来展示检测到的指南针信息。 在日常生活中&#xff0c;指南针是一种非常实用的工具&#xff0c;可以帮助我们确定方向&#xff0…

人工智能-循环神经网络通过时间反向传播

到目前为止&#xff0c;我们已经反复提到像梯度爆炸或梯度消失&#xff0c; 以及需要对循环神经网络分离梯度。 例如&#xff0c;我们在序列上调用了detach函数。 为了能够快速构建模型并了解其工作原理&#xff0c; 上面所说的这些概念都没有得到充分的解释。 本节将更深入地探…

CDN的发展和作用。当前网站被攻击适用什么样的CDN。

随着互联网的高速发展&#xff0c;网络中也出现各种日新月异的DDOS攻击&#xff0c;让人防不甚防&#xff0c;在这样的环境下&#xff0c;网络安全的地位也就不断的上升和重视&#xff0c;其防护手段也是随着攻击的变化不停的升级更新&#xff0c;从事这一行业多年&#xff0c;…

MTK Pump Express 快速充电原理分析

1 MTK PE 1.1 原理 在讲正文之前&#xff0c;我们先看一个例子。 对于一块电池&#xff0c;我们假设它的容量是6000mAh&#xff0c;并且标称电压是3.7V&#xff0c;换算成Wh(瓦时)为单位的值是22.3Wh(6000mAh*3.7V)&#xff1b;普通的充电器输出电压电流是5V2A(10W)&#xff0c…

纯CSS实现炫酷文本阴影效果

如图所示&#xff0c;这是一个文本阴影效果&#xff0c;阴影有多个颜色&#xff0c;鼠标悬停时文本阴影效果消失&#xff0c;文本回到正常的效果。让我们逐步分解代码&#xff0c;看看如何使用纯CSS实现这个效果的。 基于以上动图可以分析出以下是本次实现的主要几个功能点&am…

【软件工程师从0到1】- Java面向对象基础 (知识汇总)

前言 介绍&#xff1a;大家好啊&#xff0c;我是hitzaki辰。 社区&#xff1a;&#xff08;完全免费、欢迎加入&#xff09;日常打卡、学习交流、资源共享的知识星球。 自媒体&#xff1a;我会在b站/抖音更新视频讲解 或 一些纯技术外的分享&#xff0c;账号同名&#xff1a;hi…

QTcpSocket发送结构体的做法

作者&#xff1a;朱金灿 来源&#xff1a;clever101的专栏 为什么大多数人学不会人工智能编程&#xff1f;>>> QTcpSocket发送结构体其实很简单:使用QByteArray类对象进行封装发送&#xff0c;示例代码如下&#xff1a; /* 消息结构体 */ struct stMsg {int m_A…

【bugfix】安装 flash-attn 报错

目录 1. 报错信息 2. 解决方法 安装 flash attention 报错 1. 报错信息 Building wheel for flash-attn (setup.py) ... error error: subprocess-exited-with-error 或者 Building wheel for flash-attn (pyproject.toml) did not run successfully 甚至更多问题。 2. 解…

CLIP浅谈

CLIP论文地址&#xff1a;Learning Transferable Visual Models From Natural Language Supervision CLIP代码地址&#xff1a;https://github.com/openai/CLIP 简介 CLIP是OpenAI在2021年2月发表的一篇文章&#xff0c;它的主要贡献有以下2点&#xff1a; 1&#xff09;将图…

4、FFmpeg命令行操作7

转封装(1) 保持编码格式&#xff1a; ffmpeg -i test.mp4 -vcodec copy -acodec copy test_copy.ts ffmpeg -i test.mp4 -codec copy test_copy2.ts 改变编码格式&#xff1a; ffmpeg -i test.mp4 -vcodec libx265 -acodec libmp3lame out_h265_mp3.mkv …

无损音频播放软件 Colibri mac中文版特点介绍

Colibri for mac是一款轻量级的音频播放器软件。它具有简洁的界面设计和快速启动速度&#xff0c;能够提供流畅的音频播放体验。Colibri支持多种常见的音频格式&#xff0c;包括MP3、FLAC、ALAC、AAC等。它还提供了一些实用的功能&#xff0c;如音频均衡器、音频增益控制、播放…

酒糟废水处理设备有哪些

酒糟废水处理设备有以下几种&#xff1a; 格栅&#xff1a;用于拦截大颗粒悬浮物&#xff0c;以保护后续处理设备。调节池&#xff1a;用于调节水质和水量&#xff0c;使废水在处理过程中保持稳定。混凝反应池&#xff1a;通过添加混凝剂&#xff0c;使废水中的小颗粒悬浮物凝…

小程序开通电子发票

总目录 文章目录 总目录前言结语 前言 随着人工智能的不断发展&#xff0c;机器学习这门技术也越来越重要&#xff0c;很多人都开启了学习机器学习&#xff0c;本文就介绍了机器学习的基础内容。 首先登录商户号&#xff1a;https://pay.weixin.qq.com/index.php/core/home/lo…

探索SPI:深入理解原理、源码与应用场景

文章目录 一、初步认识1、概念2、工作原理3、作用场景 二、源码分析1、ServiceLoader结构2、相关字段3、核心方法 三、案例connector连接器小案例1、新建SPI项目2、创建扩展实现项目1-MongoDB3、创建扩展实现项目2-Oracle4、测试 Spring应用1、创建study工程2、创建forlan-test…

uniapp Android如何授权打开系统蓝牙Bluetooth?

uniapp Android如何授权打开系统蓝牙&#xff1f; 使用uniapp开发蓝牙项目过程中&#xff0c;涉及到检测手机系统蓝牙是否打开功能&#xff0c;这里介绍Android&#xff0c;iOS暂时没有找到优方法。朋友们如果有好的方案&#xff0c;欢迎评论分享~ 文章目录 uniapp Android如何…

AWS云服务器EC2实例实现ByConity快速部署

1. 前言 亚马逊是全球最大的在线零售商和云计算服务提供商。AWS云服务器在全球范围内都备受推崇&#xff0c;被众多业内人士誉为“云计算服务的行业标准”。在国内&#xff0c;亚马逊AWS也以其卓越的性能和服务满足了众多用户的需求&#xff0c;拥有着较高的市场份额和竞争力。…

华为笔记本MateBook D 14 2021款锐龙版R7集显非触屏(NbM-WFP9)原装出厂Windows10-20H2系统

链接&#xff1a;https://pan.baidu.com/s/13Kyy95GME-asli4woNN_ww?pwdbqa8 提取码&#xff1a;bqa8 HUAWEI华为MateBookD14原厂Win10系统自带所有驱动、出厂主题壁纸、系统属性专属LOGO标志、Office办公软件、华为电脑管家等预装程序

网络营销人员提问常用的ChatGPT通用提示词模板

如何制定有效的网络营销策略和计划&#xff1f; 如何运用社交媒体进行网络营销和推广&#xff1f; 网络营销中的搜索引擎优化&#xff08;SEO&#xff09;有哪些技巧和最佳实践&#xff1f; 如何运用电子邮件营销和网络广告来推广产品或服务&#xff1f; 网络营销中的数据分…

05_SHELL编程之文本处理工具SED

typora-root-url: pictures课程目标 掌握sed的基本语法结构 熟悉sed常用的命令&#xff0c;如打印p&#xff0c;删除d&#xff0c;插入i等 Windows&#xff1a;​ Linux&#xff1a; vim vi gedit nano emacs 一、sed介绍 1. sed的工作流程 首先sed把当前正在处理的行保存…