vueJS 转换旋转样式内联

Question

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

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

我试过了：

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

也许有人知道，在vue2中应该怎么写？

Answer 1

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

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>

Answer 2

第一次尝试内联样式，它有效但非常挑剔。计算是要走的路。但也在那里添加了单词 "deg"...

   <img :style="style">

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

},

vueJS 转换旋转样式内联

vueJS transform rotate style inline

css

transform

rotation

vuejs2