1. The truth value in Vue, which represents all values displayed as true (not just true);
  2. V-if is a statement, so it can only be added to one element. If multiple elements are now rendered conditionally, they can be wrapped with a template tag
  3. The V-else directive must be followed by either v-if or v-else-if otherwise it will not be recognized
  4. Vue renders elements as efficiently as possible, often reusing existing elements rather than starting from scratch, but if you need to allow users to switch login methods, then
<! -- Vue will effectively reuse existing elements instead of starting from scratch, as shown in the following example. Only the input placeholder is different, all other elements are reusable, including the input value. After clicking switch login mode, the value of value does not change, --> <template v-if="loginType"> <label>Username</label> <input placeholder="Enter your username" > </template> <template  v-else> <label>Email</label> <input placeholder="Enter your email address"> </template> <! Since vue provides the key attribute to indicate that the two input elements are completely independent, they cannot be reused, but lable can be reused. <template v-if="loginType"> <label>Username</label> <input placeholder="Enter your Username "key="USER"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address" key="EMAIL"> </template>Copy the code
  1. V-show also determines whether elements are displayed or hidden based on conditions, but it only modifies the display attribute of an element. It does not support the template tag for multiple elements
  2. Conclusion: V-if is true conditional rendering because it ensures that the time listeners and subcomponents within the condition are properly destroyed and rebuilt during the switch. V-if is lazy and does nothing if the render is false in the event that the condition is true until the first time the condition is true. V-show is much simpler, no matter what the conditions are, the elements are always rendered and simply switched based on CSS styles. In general, V-if has a higher switching overhead, V-show has better rendering overhead, so it is better to use v-show if frequent switching is required, and v-if if conditions rarely change at run time