Insert component by class?

Question

Vue.js

I have 3 elements on the page with the class .day-1 .day-2 .day-3
Depending on the prop, the component needs to be rendered where needed, in JS it could be like this:

document.querySelector(`.day-${day}`).append('<div>....</div>');

How to do it in Vue?

Answer 1

Although it is better to output in a loop and draw only what is needed (v-for)

<div v-show="prop === 1"><div class="component"></div></div>
<div v-show="prop === 2"><div class="component"></div></div>
<div v-show="prop === 3"><div class="component"></div></div>

It is clear that it comes to you through props, drove into data, in principle, the essence is the same

UPDATE (output in a loop)
Classes are generated on the fly, in v-for instead of 3, you can put more.
index + 1 to start at one instead of zero