微信小程序开发：关于data-key

最新推荐文章于 2024-12-06 08:42:55 发布
原创 最新推荐文章于 2024-12-06 08:42:55 发布 · 7.5k 阅读 · 15 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信小程序

本文介绍在WXML页面中如何利用data-*属性设置JS中的data值，并演示了通过事件参数event.target.dataset获取这些值的方法。

在wxml页面设置后台js中data中的值，可以用到data-*的方法：

例子：

wxml中代码：


js中代码：通过event参数来获取前端data-*中的值


在控制台输出：data中的值在event.target.dataset中



员猿愿
关注
微信小程序中data-key属性：数据传输
flying meng的菜鸟居
10-15 2万+
本文是总结的一点经验之谈 啥是data-key 微信小程序推出 data- 属性——自定义属性，为了更好的进行数据传递。 总结来说，data-key="{{...}}" 是往data中传数据（有后端的话是要给后端的），而data-key="..." 是从data（有后端的话是从后端先传给data接收）传到wxml页面中 怎么接收data-*的值 如下： <view bindtap="SetD...
微信小程序属性剖析：wx-key就这么重要吗？
flying meng的菜鸟居
06-02 5245
今天，就想和各位说说微信小程序中的【臂膀】——wx-key。 毫无疑问，wx-key在微信小程序中可谓是“大出风头”，这一点尤其在for循环中体现出来。但wx-key的作用，你真的了解吗？ 事实上，作为“唯一标识”，微信小程序也极力提倡在一些组件中使用 我们先来写一个简单的list列表： //wxml <block wx:for="{{arr}}"> <view>{{item}}</view> </block> //js-data data:{
前端数据缓存方案详解
油墨香^-^的博客
09-22 403
本文介绍了五种JavaScript数据缓存方案。方案一使用Map实现基础缓存，简单易用但不支持并发控制；方案二通过Promise缓存解决并发问题；方案三扩展为多Promise缓存，支持批量请求；方案四引入过期时间机制，实现更精细的缓存控制；方案五采用装饰器模式，提供优雅的代码复用方案。建议简单场景使用方案一或二，复杂场景选择方案四或五，需要精细控制时推荐方案四的自定义实现。各方案均采用ES6+特性，兼顾功能性和代码可维护性。
微信小程序之data-key = '{{value}}' 进行数据传输
前端-尔嵘
03-11 3048
形式：<view data-key="{{自定义属性值}}"></view> 示例： wxml： <view class="page-slidebar"> <view class="page-content"> <view class="wc" wx:for="{{programList}}...
微信小程序中的data-属性使用——绑定列表点击项属性（带代码示例）
m0_59704905的博客
05-05 1540
data-id="{{item.id}}"` 这个表达式的作用是将数据项 `item` 中的 `id` 属性值绑定到当前组件的 `data-id` 属性上。（非常方便传递列表中点击项的特定数据——如绑定商品列表项的id属性）在给定的代码片段中，`data-id` 是一个自定义属性（在微信小程序开发中常见），它用于存储并传递数据到对应的事件处理函数中。简而言之，`data-id` 是一个用于临时存储和传递数据的属性，方便在不同组件间或同一组件内进行数据交互。在小程序中，可以通过。
data-key
weixin_30856965的博客
10-25 612
　　在foreach或者each循环中给按钮赋予值 html中：data-key="@config.key" js里获取值： var key = $(this).data("key"); 转载于:https://www.cnblogs.com/dayang12525/p/7729717.html
data- 前缀：在微信小程序中，您可以使用 data- 前缀来绑定自定义数据到组件上
最新发布
Yan的博客
12-06 209
前缀来绑定自定义数据到组件上。然后，在事件处理函数中，您可以通过事件对象的。前缀：在微信小程序中，您可以使用。属性来访问这些数据。
微信小程序开发：request请求后台获取不到data解决方法
03-29
微信的request的post请求后台获取不到data（当初这个问题纠结了好久好久），原因是post传递的data是json格式而不是key，value的格式，所以获取不到相应的data就是post请求应为表单模式的data，微信小程序提供的data...
微信小程序demo：todo：wx.setStorageSync(KEY,DATA) 方法存放数据(源代码+截图)
06-19
微信小程序demo：todo：wx.setStorageSync(KEY,DATA) 方法存放数据(源代码+截图)微信小程序demo：todo：wx.setStorageSync(KEY,DATA) 方法存放数据(源代码+截图)微信小程序demo：todo：wx.setStorageSync(KEY,DATA) ...
【愚公系列】《微信小程序开发解析》006-视图容器组件
热门推荐
时光隧道
07-10 10万+
在微信小程序开发中，视图容器组件是构建用户界面的基础模块。它们不仅用于布局和组织页面内容，还能实现许多复杂的交互效果。无论是简单的页面布局，还是复杂的界面设计，视图容器组件都扮演着不可或缺的角色。本篇文章将深入探讨微信小程序中的视图容器组件，详细介绍其主要类型、使用方法以及在实际开发中的应用场景。我们将通过实例代码，帮助大家快速掌握这些组件的使用技巧，提高开发效率。同时，还会分享一些常见问题的解决方案以及最佳实践，希望能对各位开发者有所帮助。
微信小程序中data-key属性之数据传输(经验总结)
11-19
本文是总结的一点经验之谈 啥是data-key 微信小程序推出 data- 属性——自定义属性，为了更好的进行数据传递。 总结来说，data-key="{{...}}" 是获取页面中需要用的数据，往js文件（事件）中传—— 被绑定在其组件上的事件使用 也就是常说的：dataset；（比如：wx:for的view中的每一个项的name属性值） 而data-key="..." 是从data传到wxml页面中，一般都是在data中存在的属性才这样做，它就是为了“动态修改”data中的属性。 只有data-*传的值才能在事件中被dataset接收，其余的“{{}}”只能使用 detaildat
微信小程序自定义属性设置和获取（data-）
小天空的博客
12-30 4889
自定义属性语法以data-开头： <block wx:for='{{post_key}}' wx:key="key" wx:for-item='item'> <view catchtap='onPostTap' data-postid="{{item.postId}}"> <template is='postItem' data='{{...item}}' /> </view> </block> 无论你这样写
微信小程序通过data-***获取数据
v1029179954
02-12 4571
有时候微信小程序数据不在from表单，数据在一些按钮或者就是文字里边带着，这时候获取数据就很关键了，只有获取到了，我们向后台发起请求才有数据可传。 下面我写一个例子： 酒店预订 <view class="section_book" bindtap="bookTap" data-aid="{{item1.rid}}"> <text>预约</text> &...
微信小程序通过点击事件传参（data-）
希望看完文章的你能够带着答案离开。
06-28 2万+
微信小程序通过点击事件传参（data-）
微信小程序data-XXX传参问题
南河的南的博客
07-09 685
微信小程序data-XXX传参问题
微信小程序开发（2）_data属性
datouniao1的博客
07-26 1944
假设我们的环境都做好了，现在我们开始开发自己的小程序 首先我们开发出自己的 Hello World                                      我们要做的事情是当前点击hello World的时候HelloWorld的颜色发生变化:                     这个是我们的程序开发的基本的目录结构 这个地方我们需要做的事情是给HelloWorl...
微信小程序开发系列（十六）·事件传参·data-*自定义数据
时光の尘的博客
03-04 3533
事件传参：在触发事件时,将一些数据作为参数传递给事件处理函数的过程,就是事件传参。在微信小程序中,我们经常会在组件上添加一些自定义数据,然后在事件处理函数中获取这些自定义数据,从而完成业务逻辑的开发。在组件上通过data-"的方式定义需要传递的数据,其中*是自定义的属性,例如: 然后通过事件对象进行获取自定义数据。
微信小程序--获取通过data-* 穿的值
qq_36935391的博客
12-21 6073
parseInt(res.currentTarget.dataset.index); JSON.stringify(jsonstr);//可以将json对象转换成json对符串 JSON.parse(jsonstr); //可以将json字符串转换成json对象 var str='1250' ; Number(str) ; //得到1250 parseInt(str); //...
微信小程序的跨页面传参以及data-方法的相关细节
杜永康的博客
06-28 7711
其实在学习新东西的过程中，最快速的方式就是多看官方文档。很多技术层面的东西，官方文档其实讲的很清楚了。vue这个渐进式框架在很久以前，是没有多少官方文档供人学习的，但现在慢慢都完善了。更是有高级文档。react官方文档，官方都看不下去了，后来进行了重改。可以说都在变化，都在朝好的方向发展。微信小程序，只不过不像其他文档看起来可读，因为没有可视化的例子。全是干巴巴的文字，这个需要一个api一个api的试，才知道是干嘛的。这也给很多人造成了困扰，其实，微信小程序官方文档是非常完善的。
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值