即使在变化时我也在处理旋转：
<div @change="handleRotate"></div>
<script>
export default {
data: {
rotate = 0
},methods: {
handleRotate () {
this.rotate = this.rotate + this.getRotateAngle(e.clientX,e.clientY)
}
}
}
</script>
现在,第二个this.rotate会在每次更改时运行.我该怎么做才能使第二次this.rotate仅在第一次运行handleRotate时应用？
解决方法
解决方式Vue方式：
您可以使用$once,它只会监听一次事件.
Listen for a custom event,but only once. The listener will be removed once it triggers for the first time.
@H_404_15@你只需要将@once添加到@change,如下所示：
<div @change.once="handleRotate"></div> <script> export default { //No Change here } </script>检查演示是否在fiddle中.
旧答案：
如果您不想为旋转设置初始值,则可以再增加一个变量：hasRotated以跟踪旋转是否已更改.最初将hasRotated设置为true,一旦旋转已更改,将hasRotated设置为false,如下所示：
<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>
