How to hide or show details using v-if and v-show directive in Vue JS

Conditional rendering can be achieved using v-if
Conditional display can be achieved using v-show

First create a vue project using vue cli

vue create show-hide

Now change directory

cd show-hide

start the server

npm run serve

Lets start building the VUE component inside src/components/showHide.vue

Remove HelloWorld.vue component and register showHide.vue component in App.vue

  <div id="app">


import showHide from './components/showHide.vue'

export default {
  name: 'App',
  components: {

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;

body {
  margin: 0;
  background: #eee;

Your showHide.vue component will look like this:

    <!-- v-if directive completely removes the whole html/css block from the dom, it can be time consuming (expensive operation) -->
    <div v-if="showBooks">
        <p> Book detals are: </p>
        <p> {{ title }} - {{ author }} - {{ age }}</p>
    <button @click="toggleBooks">
        <span v-if="showBooks">Hide Books</span>
        <span v-else>Show Books</span>
        <span v-show="showBooks"> Currently showing book details</span>
        <!-- v-show doesn't remove the styles and elements from dom, this can be faster if used frequently -->

export default{
    data() {
        return {
        title: 'J. K. Rowling',
        author: 'John',
        age: '30',
        showBooks: true
    methods: {
        toggleBooks() {
            this.showBooks = !this.showBooks;


<style scoped> 
button {
    background: rgb(7, 24, 7);
    border: 0;
    padding: 10px 20px;
    color: white;
    border-radius: 20px;

Leave a Comment

Your email address will not be published. Required fields are marked *