Vue.js v-bind修饰符.camel：无法转换为camelCase

Question

我是Vue.js的新手并且有一个基本问题。

我使用修饰符.camel并尝试将属性名称“data-abc-def”（kebab-case）转换为“dataAbcDef”（camelCase）， 但我得到的结果是“dataabcdef”，即这个字符串是小写的，而不是camelCase。

以下是代码段。

<div id="app">
  <a href="#" :data-abc-def.camel="id">${ text }</a>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    text: 'Hello World！',
    id: '123456789！'
  }
});

结果我得到了......

Answer 1

.camel无法应用于data-*属性的任意属性（它适用于SVG的viewBox属性;请参阅this demo）。

请参阅Vue.js创建者关于旧版本的this comment，并说明：

  

嗯，这很烦人，因为HTML解析只会保留camelCase以获取有效的camelCase属性[...]

顺便说一句，这是启动整个.camel功能的问题。

在later issue response中，他说：

  

使用in-DOM模板时，请避免使用camelCase。