微信小程序自定义属性data-xx使用注意事项

最新推荐文章于 2024-05-14 03:09:23 发布
最新推荐文章于 2024-05-14 03:09:23 发布
阅读量2.9k 收藏 4
点赞数 2
分类专栏： 微信小程序 文章标签： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/frank_hehe/article/details/97798793
版权

在开发小程序的时候，使用data-xx让我遇到了一点问题，找问题找了很久，特此记录一下。

如上图：我都是直接用字段deleteReason定义的属性名称

如上图：然后根据属性名称获取相应的值然后打印值到控制台

如上图：打印出来为undefined

我也是醉了，感觉上面的逻辑没得毛病啊，瞬间就不开心了，然后重新梳理流程检查了一次又一次，还是感觉没问题啊，最后没办法，只有调试了一波

如上图：打印了一下event对象，发现我用的驼峰命名居然全部给我转成了小写，好吧，你赢了，最后改成小写成功取到了值。

从上面的问题来看以后自定义属性的命名不要用驼峰或者大写命名了，小程序内部会给你转成小写。

frank_hehe
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
微信小程序WXML页面组件的data-xx 的使用
billykan的博客
09-21 3158
data-xx 的作用是在事件中可以获取WXML页面组件的自定义的节点数据，用于事件的逻辑处理，也可以用来区别组件 比如 写一个list列表 想知道点击的list列表的哪一个item ,比如获取点击的图片,等等 使用data-xx 需要注意的 xx 是自己取的名字 一个demo 写一个这样的布局 wxml <view wx:for="{{wlist}}" wx:key="index"> <view class="" bindtap="showCardView" da
微信小程序data-xx 的使用
小牧在一直在学习,在前进的道路上大家一起学习，进步。
06-14 1万+
data-xx 的作用是在事件中可以获取这些自定义的节点数据，用于事件的逻辑处理 比如 写一个list列表 想知道点击的list列表的那一个item ,比如获取点击的图片,等等 使用data-xx 需要注意的 xx 是自己取的名字, 后面跟着的渲染一定要是使用的值,否则无效 比如点击的是list 后面跟的是list的值,如果是图片后面就要是图片url的地址, 一个demo 不如现在要点击...
uniapp转微信小程序编译报错 Bad attr `data-event-opts` with message
最新发布
2401_84093443的博客
05-14 375
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
:data-xxx自定义属性（定义自己需要的数据）
m0_68956554的博客
07-17 228
（定义自己需要的数据）data-xxx自定义属性
微信小程序——data-*自定义属性
alary2012的博客
04-30 988
在jQuery的attr与prop提到过在IE9之前版本中如果使用property不当会造成内存泄露问题，而且关于Attribute和Property的区别也让人十分头痛，在HTML5中添加了data-*的方式来自定义属性，所谓data-*实际上上就是data-前缀加上自定义的属性名，使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。 读写方式 da...
微信小程序data-XXX传参问题
南河的南的博客
07-09 449
微信小程序data-XXX传参问题
微信小程序 自定义组件 - 弹出菜单demo
03-29
我也很困惑这件事，今天了解到自定义组件这个概念，就试了试，感觉好像弥补了template的那个缺点，于是写了个小demo，也算做个笔记 我觉得 如果不需要传参，也不需要向外发送事件的，可以用include，相当于直接把...
微信小程序自定义组件--日历组件
06-05
微信小程序自定义组件是开发微信小程序时非常关键的一部分，它允许开发者扩展小程序的功能，提高代码复用性，提升开发效率。本案例中的“日历组件”是一个轻量级的组件，专为微信小程序设计，提供了丰富的自定义可能...
基于canvas 2D实现微信小程序自定义组件-环形进度条
08-12
最近开发一款背单词的微信小程序，计划使用环形进度条展示每日背单词进度。 讲解博文：...
微信小程序-自定义组件-遮罩层
05-05
在此，我们将深入探讨如何在微信小程序中创建和使用自定义遮罩层组件。 首先，我们需要了解微信小程序的组件体系。微信小程序的组件系统基于WXML（WeiXin Markup Language）和WXSS（WeiXin Style Sheet），这两种...
关于使用data()获取自定义属性出现undefined的说明
weixin_30271335的博客
10-30 739
这应该是这个函数的一个bug，没有考虑到驼峰式的写法，当我写成驼峰式，即是有大小写的变量时就会出现没有定义的情况。 今天写个交互，需要用到自定义属性，因为这个自定义属性是当作字段用的，就直接用了字段名称，结果发现取出来是 undefined ，检查了好几遍没有代码错误，试了下另外一个字段，发现可以取到，看了下区别，取不到值得自定义属性是带有驼峰的，难道是这个问题？去掉了驼峰中的大写，发现可以了，...
微信小程序数据绑定
05-17
微信小程序数据绑定demo，便于初学者学习、借用、创建小程序
微信小程序data-绑定数据的坑
杰克船长
09-27 1万+
在whtml中这么写 &lt;view bindtap='like' data-id='{{laugh.id}}' data-createdBy='{{laugh.created_by}}'&gt; 在js中取值 like(e){ console.log(e.currentTarget.dataset['createdBy']); } 控制台输出undefined,找了半天原...
正确使用uniapp搭配微信开发者工具自带的骨架屏功能，生成骨架屏
weixin_44953151的博客
09-24 4125
2、在index.vue中，把刚刚生成的index.skeleton.wxml和index.skeleton.wxss两个文件复制到index.vue文件里面，注意wxml文件应该放在template标签中，wxss的文件内容应该放在style标签中。重点：把index.skeleton.wxml和index.skeleton.wxss文件中的（is=““和data-event-opts=””）的整个属性删掉。很多人都知道微信开发者工具自带生成骨架屏的功能，但是却不知道怎么使用，接下来教大家使用。
uniapp转微信小程序编译报错 Bad attr `data-event-opts` with message
前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！
10-16 1万+
Bad attr `data-event-opts` with message > 1 | <view class="activityContent data-v-74e8dc3a"> > <view class="poster_img_outside data-v-74e8dc3a" data-event-opts="{{index==setdata?animdata:{}}}"> > <image src="{{imgSrc}}" mode class=
Uniapp-微信小程序实现全局事件监听并进行数据埋点
flymyd的博客
06-17 1万+
最近接到需求，领导希望使用微信开放平台上免费的We分析进行数据埋点，但又不希望在现有uniapp开发的微信小程序代码上做侵入式修改，笔者奉命进行了技术调研，考虑通过劫持事件的方式来实现捕获特定事件并上传分析平台的功能。需要特别注意的是，微信小程序是不能得到document对象的，$el上挂载的也是undefined，自然也就不能通过全局addEventListener的方式来监听特定事件。在调研中想到可以通过劫持小程序的自定义组件构造器Component()来实现事件的监听。...
Bootstrap 按钮（实例 ）
2401_84093443的博客
05-04 681
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
微信小程序--data的赋值与取值的几种方式
热门推荐
大尧酱的博客
05-03 4万+
目录 通过小程序官方文档可知（传递单个值）： 传递数组： 微信小程序 跳转传参数 传对象 通过小程序官方文档可知： Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。其中的参数data用来设置初始数据，WXML 中的动态数据均来自对应 Page 的 data。 所以如果页面需要显示动态数据必须要把数据更...
微信小程序获取data-xx=""属性的值，自定义属性设置和获取（data-）
刺心的博客
04-22 4020
<view class="details-btn" data-taskId="111" bindtap='taskdetails'>测试</view> 无论你这样写data-taskid="…“还是这样写data-taskId=”…"，获取值的时候都是这样taskid：（参数小写） taskdetails: function(e) { var taskId =...
微信小程序自定义属性
04-13
微信小程序的自定义属性是指在组件中可以自定义添加的属性，用于实现组件的个性化定制和功能扩展。通过自定义属性，可以在组件中传递数据、控制样式和行为等。 在微信小程序中，可以通过两种方式来定义自定义属性： 1. 在组件标签上使用data-*属性：可以在组件标签上使用data-*属性来定义自定义属性，其中*可以是任意的属性名。例如： ```html <view data-custom-attr="value"></view> ``` 在组件的js文件中，可以通过`this.data`来获取自定义属性的值： ```javascript Page({ onLoad: function() { console.log(this.data.customAttr); // 输出"value" } }) ``` 2. 在组件的properties字段中定义：可以在组件的properties字段中定义自定义属性，以实现更加灵活的属性控制。例如： ```javascript Component({ properties: { customAttr: { type: String, value: 'default value' } }, methods: { onTap: function() { console.log(this.properties.customAttr); // 输出"default value" } } }) ``` 在使用该组件时，可以通过在组件标签上设置属性值来传递数据： ```html <custom-component custom-attr="value"></custom-component> ``` 以上就是微信小程序中自定义属性的介绍。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值