本文转自

原文链接：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（手动滑稽），反正以后注意下吧，全部小写就完事了，驼峰也太麻烦了吧（难顶）。