javascript - 具有作为 prop 传递到组件的数据属性的对象不是 Vue 的 kebap 大小写

标签 javascript html object vue.js vue-component

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/

相关文章:

javascript - jquery更新嵌套对象的键

javascript - 我如何使用 Css 提取 HTML 表格的值?

javascript - 从 JSON.stringify 中提取数据

javascript - 两个 Div 彼此相邻,其中 ID 包含图像

javascript - 我应该在 Greasemonkey 或 Chrome 扩展的用户脚本中缩小 javascript 吗?

html - Btn-group 在窗口调整大小时堆叠(更小)

html -::before 到底做了什么?

javascript - 按键值过滤对象

javascript - 使用 typescript 缩小时,angularjs 未定义主模块

javascript - 使用 Node.js 和 AWS Lambda 将 S3 文件的内容记录到 postgres 表