Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Vue.js | v-show directive

  • Last Updated : 22 Jun, 2020

The v-show directive is a Vue.js directive used to toggle the display CSS property of a element with our data. If the data is true it will make it visible else it will make it invisible. First, we will create a div element with id as app and let’s apply the v-show directive to this element with data as a message. Now we will create this message by initializing a Vue instance with the data attribute containing either true or false.
Syntax:

v-show="data"

Parameters: This directive accepts a single parameter which is the data. 
Example 1: This example uses VueJS to show an element with v-show.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

HTML




<!DOCTYPE html>
<html>
    <head>
        <title>
            VueJS | v-show directive
        </title>
  
        <!-- Load Vuejs -->
        <script src=
        </script>
    </head>
  
    <body>
        <div style="text-align: center; width: 600px;">
            <h1 style="color: green;">
                GeeksforGeeks
            </h1>
            <b>
                VueJS | v-show directive
            </b>
        </div>
  
        <div id="canvas" style="border: 1px solid #000000;
                                width: 600px; height: 200px;">
            <div v-show="message" id="app">
                Hello I'm visible.
            </div>
        </div>
  
        <script>
            var app = new Vue({
                el: "#app",
                data: {
                    message: true,
                },
            });
        </script>
    </body>
</html>

Output:



Example 2: This example uses VueJS to hide an element with v-show.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        VueJS | v-show directive
    </title>
  
    <!-- Load Vuejs -->
    <script src=
    </script>
</head>
  
<body>
    <div style="text-align: center;width: 600px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <b>
            VueJS | v-show directive
        </b>
    </div>
  
    <div id="canvas" style="border:1px solid #000000;
                            width: 600px;height: 200px;">
        <div v-show="message" id="app">
            Hello I'm invisible.
        </div>
    </div>
  
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: false
            }
        })
    </script>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!