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

<template>
  <div id="app">
    <showHide/>
  </div>
</template>

<script>

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

export default {
  name: 'App',
  components: {
    showHide 
  }
}
</script>

<style>
#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;
}
</style>

Your showHide.vue component will look like this:

<template>
<div>
    
    <!-- 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>
    </div> 
    <button @click="toggleBooks">
        <span v-if="showBooks">Hide Books</span>
        <span v-else>Show Books</span>
    </button>
    <div>
        <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 -->
    </div>
</div>
</template>


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

            }
        }
}
</script>

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