Vue js更改元素

Question

我有一个需要创建随机点的组件。

<div>
 <span v-for="point in getPoints()" 
     class="dot" :style="calcPosition()"></span>
</div>

methods: {
  getPoints() {
    return _.range(0, 100);
  },
  calcPosition() {
    return {
      top : (_.random(0, 230)) + 'px',
      left: (_.random(0, 210)) + 'px'
    }
  }
},

如何创建一个间隔以每秒运行一次calcPosition方法并为更改设置动画？

Answer 1

使用setInterval()包装方法并为元素设置CSS转换属性。

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval

您最初可以从mounted()生命周期状态调用您的方法。