vue用计算属性动态控制div的大小

可以使用Vue的计算属性来动态控制div的大小。具体实现步骤如下:

1. 在Vue实例中定义一个计算属性，该计算属性的返回值为一个对象，对象包含一个style属性，该属性值为一个对象。

2. 在style对象中设置div的宽和高，可以使用data中的变量或者直接给定数值。

3. 在div标签中使用v-bind指令将计算属性绑定到style属性上。

示例代码如下:

<template>
  <div v-bind:style="divStyle"></div>
</template>

<script>
export default {
  data() {
    return {
      divWidth: 100,
      divHeight: 100
    }
  },
  computed: {
    divStyle() {
      return {
        style: {
          width: `${this.divWidth}px`,
          height: `${this.divHeight}px`
        }
      }
    }
  }
}
</script>

在上面的示例中，我们定义了一个计算属性divStyle，该属性返回一个包含style属性的对象，style属性的值为一个对象，其中width和height属性分别为data中的divWidth和divHeight。在div标签中使用v-bind指令将计算属性divStyle绑定到style属性上，这样就可以动态控制div的大小。