vueJS transform rotate style inline

Question

I need to add to div rotate. I don't need animate, I just need to add it inline. Value of rotate is depend on data in vue component.

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

I tryed:

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

Maybe someone know, how it should to be in vue2?

Answer 1

Actually you need to make the transform value a string:

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <div :style="{ transform: 'rotate('+ turn+'turn)'}"> Test </div>
</div>

But I adivse to use a compute properties:

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <div :style="style"> Test </div>
</div>