vueJS 변환 회전 스타일 인라인

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="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>

하지만 나는 컴퓨터 속성을 사용하는 것을 선호한다.

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>

인라인 스타일을 처음 시도했는데 효과가 있었지만 매우 까다로웠다.계산이 잘 되었다.'데그(deg)'라는 단어까지 덧붙였으니...

   <img :style="style">

   computed: {
     style () {
     return { transform: 'rotate('+this.turn+'deg)'}
 }

},

참조URL: https://stackoverflow.com/questions/48381670/vuejs-transform-rotate-style-inline