css – vueJS变换旋转样式内联

我需要添加到div旋转.我不需要动画,我只需要内联添加它. rotate的值取决于vue组件中的数据.

.
.
.
data(): function(){
 return{
  deg: 5
 }
}
.
.
.

我试过：

v-bind:style="{ transform: rotate(deg) }"
v-bind:style="$transform: 'rotate('+deg+')'"

也许有人知道,应该如何在vue2？

实际上,您需要将变换值设为字符串：

new Vue({
  el: "#app",
  data: { turn: 0.5 }
})

<script src="http://img.558idc.com/uploadfile/allimg/210613/1302154153-0.jpg"></script>
<div id="app">
  <div :style="{ transform: 'rotate('+ turn+'turn)'}"> Test </div>
</div>

但我喜欢使用计算属性：

new Vue({
  el: "#app",
  data: { turn: 0.5 },
  computed: {
     style () {
        return { transform: 'rotate(' + this.turn + 'turn)'}
     }
  }
})

<script src="http://img.558idc.com/uploadfile/allimg/210613/1302154153-0.jpg"></script>
<div id="app">
  <div :style="style"> Test </div>
</div>