vue如何让一句代码只执行一次,如何仅触发一次vue方法，而不是每次都触发一次...

I'm handling a rotate even on change:

export default {

data: {

rotate = 0

},

methods: {

handleRotate () {

this.rotate = this.rotate + this.getRotateAngle(e.clientX, e.clientY)

}

}

}

Right now, the second this.rotate runs on every change. How can I do it so that the second this.rotate is applied only the first time handleRotate runs?

解决方案

Solving it Vue way:

You can use $once, which will listen for a event but only once.

Listen for a custom event, but only once. The listener will be removed once it triggers for the first time.

You just need to add .once to @change like following:

export default {

//No Change here

}

Check demo if this in the fiddle.

Old Answer:

If you do not want to have initial value set for rotate, you can have one more variable : hasRotated to track whether rotate has been changed or not. Initially set hasRotated to true, once rotate has been changed set hasRotated to false, like following:

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

}

}

}

}