Loop Vue2 tag with keyup + modifier and click
No.

Or well, maybe you could but I absolutely do not see any reason to do so.

What each &lt;span&gt; has in common:


The same class
They all have a click event and a keyup event


What each &lt;span&gt; has different:


They all have different handlers for what to do on the click/keyup event
They all have listen for different keyup events.


I don't see any benefit in creating a loop from this.

Some things you might want to consider though is:


Have a method that is performed for both click and the keyup event, to not copy-paste code between the different handlers.
Create a component for &lt;span class="calc-button-control"&gt;


If you have plenty of more of these &lt;span&gt; elements, creating a component would be the way to go. Then you could have a component to handle the following:


It is a &lt;span&gt; element and applies the calc-button-control class.
It has a method for what to do when clicked or keyup event triggers.


I am not sure how flexible you can make the keyup listener, I don't think you can for example pass :keypress="enter" or similar to have it listen to @keyup.enter so I am not sure if creating a component for all of this does more harm than good.