V-if: Toggles element display and hide (manipulating DOM elements) depending on whether the expression is true or false



<body>
    <div id="app">
        <input type="button" value="Toggle display" @click="toggleIsShow">
        <p v-if="isShow">Xi moving</p>
        <p v-show="isShow">Xi touching V-show decoration</p>
    </div>

    <script src=".. /js/vue.js"></script>
    <script>
        const app = new Vue({
        el: '#app'.data: {
            isShow: false
            },
            methods: {
                toggleIsShow: function () {
                    this.isShow = !this.isShow; }}})</script>
</body>
Copy the code



  • As you can see from the console, v-show hides the element with display: None, and v-if removes the element directly
  • Example: V-if expression application
<body>
    <div id="app">
        <h2 v-if="age>=35">age</h2>
    </div>

    <script src=".. /js/vue.js"></script>
    <script>
        const app = new Vue({
        el: '#app'.data: {
            age: 40}})</script>
</body>
Copy the code

  • Change the default value of age above to 20 and it won’t show up