即使在变化时我也在处理旋转：
<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.
你只需要将@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>
