Vue is different from V-if and V-show

  1. V-if: Deletes and creates elements each time, frequently manipulating the DOM tree
  2. V-show: Does not operate on the DOM tree, just toggles the display: None style of the element

Main code demo:

<div id="app"> <input type="button" value="toggle" @click="flag = ! Flag "> <h3 v-if = "flag"> This is v-if control area </h3> <h3 v-show = "flag"> this is v-if control area </h3> </div> <script> var vm = new Vue({ el:'#app', data:{ flag : true, }, }) </script>Copy the code

The result is as follows :(notice the change in the red box) when the button is not clicked

After you click the button