修改元素的样式属性

利用v-bind 属性值绑定 和 v-model 数据绑定 就可以实现修改元素的样式属性：

<input type="number" v-model="size" />
<div
  class="circle"
  :style="[{ width: size + 'px', height: size + 'px', lineHeight: size +'px'},
  { transform: 'rotate(30deg)' }]"
>
  Hi!
</div>

其中，{} 表示是一个对象，里面的键值对都是js语法。对于像 line-height 这样的 css 属性，我们需要用 'line-height' 或者 lineHeight 来代替。

如果要绑定到computed方法需要这样写：

<div class="box" :style="style"></div>

computed: {
    style() {
        return {
            transform: `
                perspective(${this.perspective}px)
                rotateX(${this.rotateX}deg)
                rotateY(${this.rotateY}deg)
                rotateZ(${this.rotateZ}deg)
            `
        }
    }
}