vue2.0版本 点击盒子循环改变大小和颜色

可以使用Vue的模板语法、绑定事件和计算属性来实现这个需求。具体实现代码如下：

<template>
  <div
    :style="{ backgroundColor: boxColor, width: boxWidth + 'px', height: boxHeight + 'px' }"
    @click="handleClick"
  ></div>
</template>

<script>
export default {
  data() {
    return {
      boxColor: 'blue', // 盒子颜色
      boxWidth: 200, // 盒子宽度
      boxHeight: 200 // 盒子高度
    }
  },
  methods: {
    handleClick() {
      this.boxColor = this.getRandomColor()
      this.boxWidth = this.getRandomSize()
      this.boxHeight = this.getRandomSize()
    },
    getRandomColor() { // 生成随机颜色的方法
      const colors = ['red', 'green', 'yellow', 'pink', 'purple', 'orange']
      return colors[Math.floor(Math.random() * colors.length)]
    },
    getRandomSize() { // 生成随机尺寸的方法
      return Math.floor(Math.random() * 200 + 100)
    }
  },
  computed: {
    boxStyle() {
      return {
        backgroundColor: this.boxColor,
        width: this.boxWidth + 'px',
        height: this.boxHeight + 'px'
      }
    }
  }
}
</script>

这段代码中，我们使用Vue的模板语法，将盒子的样式绑定到了组件的data中定义的属性上，同时使用@click绑定了盒子的点击事件，点击时会调用组件中的handleClick方法，实现了盒子变换颜色和尺寸的效果。我们也可以使用计算属性boxStyle来简化模板中的样式绑定。这样，每次点击盒子时，都会改变盒子的颜色和尺寸，实现了循环的效果。