Vue2中如何给div绑定动态内联rotate旋转样式？

嘿，我来帮你搞定这个样式绑定的小问题！你之前尝试的两种写法都存在语法或逻辑上的小错误，我来给你拆解一下，再给出正确的实现方式：

你之前写法的问题分析 #

• 第一种写法 v-bind:style="{ transform: rotate(deg) }"：这里的rotate(deg)没有被当作字符串处理，而且deg作为变量没有和旋转语法进行正确拼接，浏览器无法识别这个样式值。
• 第二种写法 v-bind:style="$transform: 'rotate('+deg+')'"：语法完全错误，$transform不是合法的样式属性名，而且整体不符合Vue绑定样式的对象格式要求。

正确的实现方式 #

方式1：传统字符串拼接 #

在Vue2的模板中，你需要把deg变量和rotate()的CSS语法拼接成完整的字符串，同时别忘了加上角度单位deg：

<div v-bind:style="{ transform: 'rotate(' + deg + 'deg)' }">我是被旋转的元素</div>

方式2：ES6模板字符串（更简洁） #

如果你的项目支持ES6语法，可以用模板字符串来实现，可读性更强：

<div v-bind:style="{ transform: `rotate(${deg}deg)` }">我是被旋转的元素</div>

额外简化：简写v-bind #

Vue中v-bind:style可以简写为:style，让代码更清爽：

<div :style="{ transform: `rotate(${deg}deg)` }">我是被旋转的元素</div>

这样当你data里的deg值为5时，这个div就会被应用transform: rotate(5deg)的内联样式，实现你需要的静态旋转效果，完全依赖data中的变量值。

内容的提问来源于stack exchange，提问作者Eva