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?
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>
First tried inline style, it worked but was very finicky. Computed was the way to go. But also added the word "deg" in there...
<img :style="style">
computed: {
style () {
return { transform: 'rotate('+this.turn+'deg)'}
}
},
