I'm making a bookshelf app, and I'm making a form that switches when I press a button like the gif below. (There are two more similar ones)

As you can see, pressing the red button switches from "Search" to "Direct input", but the process of switching the display at this time isv-bindorv-show I'm wondering whether to use (v-if)or write using plain JavaScript.

When the

button is pressed, a function is fired, and the truth value of the variablesearchis reversed in it, so thatv-bindandv-showto switch the display.
However, since there are few contents to switch in the first place in this function, it is necessary to prepare various variables for that purpose, create a newclassfor switching, and do not write variously on the template side in the function. You can usedocument.querySelector (element) ~to manipulate the values ​​directly, and the processing can be summarized in one place.

For me, I am using Vue.js, and if I usev-bindetc. on the template side, anyone can see the flow of processing at that point So I think that it is explicit, but as described above, you have to write a new description for allhtml,css, andJavaScriptI think that it is subtle because the code increases in various places.

I didn't know which one was right for a self-taught person with no practical experience.
I would be happy if you could tell me what kind of ideas you would implement in practice.

  • Answer # 1

    Besides Vue.js, "Rewriting directly without using virtual DOM with a virtual DOM framework" is basicallyprohibited.

    On the framework side, the updated content is picked up anddifference updateis done, so if you change the state by manipulating the DOM manually, "Vue.js side will There is a risk of inconsistencies between the "remembered DOM" and the "real DOM", and subsequent updates fail.