关于通过prop传值设置数组（多个）类名的问题。

粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

测试代码

解释一下我template的意思：
我在data中存放class类名（classA，这里为什么不用classArr，我是想测试下组件里面用的是classA还是classArr），通过prop传递classArr参数，在组件中使用“:classArr=‘classA’”来接收参数。然后在p标签中:class=“classArr”（期望渲染为：p class=“backColor fontColor” >这是一段文本</p ）

效果展示

查看网页源代码

为什么这里是classArr？

feer 1楼•8 个月前

如果你是使用的 template 或者 render 来渲染dom 那么这样写没有问题。

如果你是直接在 html 里写，那么你需要使用中线法去写。原因就是楼上说的

huaer 2楼•8 个月前作者

HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名)

也就是：需要写成

<vcom-btn :class-arr="classA"></vcom-btn>

可以参照： https://cn.vuejs.org/v2/guide/components-props.html

feer 3楼•8 个月前

感谢！

我将:classArr改为:class-arr之后问题就解决了！

还有个小问题想请教你一下，就是以后在实际工作或项目中，全部使用短横线分割预格式化文本的方式是否可行？因为一会驼峰一会短横线分割岂不是很容易搞混？