Vue.js v-show vs v-if

If you're just getting started with this series of Vue.js posts, you should start with the Vue.js Starter Page.

V-if and v-show can both be used to dynamically display DOM elements at run time. But which one, and why?

First, we'll add 2 buttons that, when clicked, update the value of the boolean vars they represent. So when clicked, the value of the button turns opposite (true to false, false to true).

Clicking the each of the buttons will immediately update the value of either "error" or "success" which shows/hides the associated <p> tag. The v-if below (which has been commented out) completely removes that <p> tag from the DOM.

Using v-if will remove the element from the DOM completely; using v-show will simply change the CSS value for display: to none. You may have security/content rights issues where you'd prefer to use on or the other, so with this understanding there are options.

v-if vs. v-show

An error has occurred.

A success has happened!



<!doctype html>

<html>
<head><meta charset="UTF-8"><title>VueJS</title>
<script src="https://unpkg.com/vue@2.3.0"></script>

</head>
<body>

<div id="app"> <h3>v-if vs. v-show</h3> <button v-on:click="error= !error">Toggle Error on/off</button> <button v-on:click="success= !success">Toggle Success on/off</button> <!--<p v-if="error">There has been an error.</p> <p v-else-if="success">Congrats, success!!!</p>--> <p v-show="error">An error has occurred. </p> <p v-show="success">A success has happened!</p> </div> </body> <script> var vm = new Vue({ el:'#app', data: { error: false, success: false } }) </script> </html>

Link your website to this page! Copy and paste the URL below:
http://www.cfsnap.com/vue-js/vue-js-v-show-vs-v-if/