本文转自
原文链接:https://blog.csdn.net/weixin_42528204/article/details/106094256
例:我想在删除时得到商品的id
~
<button class="cu-btn radius line-gray margin-right" bindtap="deleteTap" data-goodsId="{{order.goodsId}}">删除</button>
1
根据我们习惯的命名方式都是驼峰命名法,所以在设置dataset时,顺手就写了goodsId。
~
deleteTap(e) {
var goodsId= e.currentTarget.dataset.goodsId;
console.log("goodsId",goodsId);
},
1
2
3
4
完美的代码,当我满心欢喜的以为能取到值时,结果却给我一个大大的惊喜。
原因
怎么办呢?,我们知道,dataset的设置,是能在e中取到的,我们可以先将e输出
deleteTap(e) {
var goodsId= e.currentTarget.dataset.goodsId;
console.log("e",e);
},
1
2
3
4
WTF???事实告诉我们,dataset中,属性全是小写字母。我觉得事情并不简单,这坑要坑不少人(驼峰命名是个程序员都习惯了吧2333)。但我不服啊,就去翻了翻 官方文档,果然找到了介绍。
关于dataset
在组件节点中可以附加一些自定义数据。这样,在事件中可以获取这些自定义的节点数据,用于事件的逻辑处理。
在 WXML 中,这些自定义数据以 data- 开头,多个单词由连字符 - 连接。这种写法中,连字符写法会转换成驼峰写法,而大写字符会自动转成小写字符。
data-element-type ,最终会呈现为 event.currentTarget.dataset.elementType ;
data-elementType ,最终会呈现为event.currentTarget.dataset.elementtype
1
2
官方示例
<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>
~
Page({
bindViewTap:function(event){
event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法
event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
}
})
1
2
3
4
5
6
7
8
结尾
官方文档还是顶啊,小声BB(手动滑稽),反正以后注意下吧,全部小写就完事了,驼峰也太麻烦了吧(难顶)。