为什么两种写法是不一样的？

问题遇到的现象和发生背景

为什么第一个div中的style属性需要加{}才能正常显示？
第二个div中的style属性需要加{}才能正常显示？
为什么写法是不一样的？

问题相关代码，请勿粘贴截图

<div class="box" :style="{ backgroundColor: `rgb(${r}, ${g}, ${b})` }">
 </div>
<div class="box" :style=" 'backgroundColor: rgb(' + r + ',' + g + ',' + b + ')' ">
</div>

运行结果及报错内容

我的解答思路和尝试过的方法

我想要达到的结果

es6的知识 ，在 `` 中可以使用 ${} 直接把变量和字符串拼接起来
https://blog.csdn.net/yintianqin/article/details/62887697

{ backgroundColor: rgb(${r}, ${g}, ${b}) } 这里有 ${b}

第一个加{}是因为在vue中属性前面加：（v-bind的缩写）等于说是引号里的代码是js的语法领域（逻辑判断只可以三目if等不行）在js里xx:xx是对象语法所以需要用{}。第二行不需要用到是因为style是html的样式属性它识别的是字符串类型所以最后是字符串就行，${}字符串拼接是es6语法，在``里的是字符串在${}里的是就是js的语法领域（原理同如vue的v-bind）所以最外围不需要用对象语法。第一行有两种情况第一种就是多个属性或值比较规律就用{background:myColor}或者:style="{myBackground}"(需在data中添加如background:”red“的变量)。如果多个值需要拼接就应该这样写才对

<div class="box" :style="` backgroundColor: rgb(${r}, ${g}, ${b};) `">
 </div>