As you can see, pressing the red button switches from "Search" to "Direct input", but the process of switching the display at this time is
button is pressed, a function is fired, and the truth value of the variable
searchis reversed in it, so that
v-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 new
classfor switching, and do not write variously on the template side in the function. You can use
document.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 use
v-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 all
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.
- html - height is not reflected in css