关于 " 绑定内联样式 " 一节中，CSS属性名命名约定问题

[AnyGong]

非常感谢作者的创作，作为一个新手菜鸟，使用起来毫不费力。在使用的过程中遇到一点问题，请麻烦作者解惑。
我在使用中有需要用到以下的一种绑定模板用法

<i :style=" { background-image: imgUrl } "></i> ，imgUrl的值为 url("i-happy.png")，

这样绑定赋值的时候，DOM 无法显示。我预想的结果应该是

<i style="background-image: url("i-happy.png")"></i>

然会debug 系统提示 ：

[Vue warn]: Invalid expression. Generated function body: {scope.background-scope.image:scope.menuList.iconName} index.js:1449 [Vue warn]: Error when evaluating expression "{ background-image: menuList.iconName }". Turn on debug mode to see stack trace.

我根据提示修改成以下

<i :style=" { backgroundImage: imgUrl } "></i> 这样绑定赋值的时候，效果就正常显示了。

可我在官网的api种看到有说

CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）

我想知道后面的 kebab-case属性命名是在什么情况下可以使用

还有就是一开始我是这样用的
<i :style=" { background-image: url ( iconName ) } "></i>，后来chrome [Vue] warn 说的好像也是没找到这个属性，貌似在这种特殊的css属性中，只要是 : 号后面就统一解析成属性的值，也无法使用。我想到了还有 css3的 linear-gradient 这种貌似的属性.

[yyx990803]

记住绑定里面是 JavaScript 表达式。

在 js 里面 { background-image: url ( iconName ) } 会报错，要用 { 'background-image': url ( iconName ) }... 带短横的属性名需要用字符串...

[AnyGong]

@yyx990803 very tanks!