Javascript 如何仅触发一次vue方法，而不是每次

即使在

更改

，我也在处理一个轮换：

<div @change="handleRotate"></div>
<script>
export default {
  data: {
    rotate = 0
  },
  methods: {
    handleRotate () {
      this.rotate = this.rotate + this.getRotateAngle(e.clientX, e.clientY)
    }
  }
}
</script>

导出默认值{
数据：{
旋转=0
},
方法：{
把手旋转（）{
this.rotate=this.rotate+this.getRotateAngle（e.clientX，e.clientY）
}
}
}

---

现在，第二个

this.rotate

在每次

change

上运行。如何才能使第二个

this.rotate

仅在

HandlerRotate

第一次运行时应用？

如果

rotate

始终从零开始，则可以执行以下操作：

export default {
    data: {
        rotate = 0
    },
    methods: {
        handleRotate(e) {
            if (this.rotate !== 0) {
                return;
            }
            this.rotate = this.rotate + this.getRotateAngle(e.clientX, e.clientY);
        }
    }
};

---

一个简单的解决方案是添加一个类似这样的标记：

<script>
export default {
  data: {
    rotate = 0
  },
  methods: {
    handleRotate () {
      if(!this.rotated){
          this.rotate = this.rotate + this.getRotateAngle(e.clientX, e.clientY);
          this.rotated = true;
      }
    }
  }
}
</script>

导出默认值{
数据：{
旋转=0
},
方法：{
把手旋转（）{
如果（！this.rotated）{
this.rotate=this.rotate+this.getRotateAngle（e.clientX，e.clientY）；
这是真的；
}
}
}
}

当然，您需要启动此操作。将其旋转为false

以Vue方式解决： 您可以使用，它将只侦听一次事件

侦听自定义事件，但仅侦听一次。侦听器第一次触发后将被删除

您只需将

添加到
@change
，如下所示：

<div @change.once="handleRotate"></div>
<script>
export default {
  //No Change here
}
</script>

<div @change="handleRotate"></div>
<script>
export default {
  data: {
    rotate: 123,
    hasRotated: false
  },
  methods: {
    handleRotate () {
      if(this.hasRotated){
        this.rotate = this.rotate + this.getRotateAngle(e.clientX, e.clientY)
        this.hasRotated = false
      }
    }
  }
}
</script>

谢谢，但是如果默认旋转值不是0，这将不起作用。这将假设this.rotate从值===0开始，可能不是这样。我假设
rotate
从零开始