https://jsfiddle.net/snLxa8g1/
我将一个对象作为 prop 传递给组件,然后使用 v-bind 将所有键值对作为属性插入到 div 元素中。在此示例代码片段中,我传递了 { dataXyz: 'hey' }
,然后在 DOM 中将其呈现为小写。我怎样才能用Vue将此CamelCase对象表示法转换为kebap-case(例如,属性键在dom中变为data-xyz
)?是否有特定于 Vue 的辅助函数/方法来完成此任务? docs简短地提到 Camel- 和 kebap-casing,但不要谈论我可以将传递的对象转换为按描述到达的任何方式:/
最佳答案
我找到了适合您的用例的有用代码片段
字符串
.replace(/([a-z0-9])([A-Z])/g, '$1-$2')
.replace(/([A-Z])([A-Z])(?=[a-z])/g, '$1-$2')
.toLowerCase();
引用https://gist.github.com/nblackburn/875e6ff75bc8ce171c758bf75f304707#gistcomment-2874149
这个jsfiddle可能对你有帮助 https://jsfiddle.net/pwmuebnL/
关于javascript - 具有作为 prop 传递到组件的数据属性的对象不是 Vue 的 kebap 大小写,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57892638/