vue 获取自定义属性值

  <div class="ku-menu-item-group" :data-route="item.route" @click="toRoute">
       <i class="el-icon-menu"></i>
       <span class="ku-menu-collapse"><i class="el-icon-arrow-right"></i></span>
  </div>

说明：data-route 为自定义属性

 // 方法集合
    methods: {
      toRoute: function (e) {
        let route = e.currentTarget.getAttribute("data-route")
        console.log(route);
      }
    }

要被自己蠢哭了 ~~~~~很简单的东西想半天~~~~~由于自己的愚蠢 ~~~被气哭了~~还被领导骂~~

1、需求

2、思路

菜单数据是li动态生成的，当点击他，可获取他身上的内容，将拿到的值赋给下面的标题头即可。

问题是如何获取li上面的属性值~~~~

试了ref   click  都没成功  最后发现是自己没细心看到下面的数据。。。。。。

3、代码

HTML:

 Js：

方法一： 

<div id="app">
  <button  @click="getData($event,'100')">点我</button>
</div>

methods : {
   getData(e,num) {
        console.log(num);     // 输出 100
   }
}

方法二：

<div id="app">
  <button data-num="100" ref="dataNum"  @click="getData($event)">点我</button>
</div>

methods : {
   getData (e) {
       console.log(this.$refs.dataNum.dataset.num);     // 输出 100
   }
}

方法三：

<div id="app">
  <button data-num="100" @click="getData($event)">点我</button>
</div>

methods : {
   getData (e) {
       console.log(e.target.getAttribute('data-num'));     // 输出 100
  
   }
}