关于通过prop传值设置数组(多个)类名的问题。
发布于 8 个月前 作者 huaer 501 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

测试代码

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

效果展示
image

查看网页源代码
image

为什么这里是classArr?

3 回复

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

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

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

也就是: 需要写成

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

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

感谢!
image

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

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

回到顶部