Vue.js 2 Design Patterns and Best Practices

v-show

If we want to hide elements from view yet still have them in the DOM (effectively display:none), we can use v-show:

<template><div id="app"> <article v-show="admin">  <header>Protected Content</header> <section class="main">  <h1>If you can see this, you're an admin!</h1> </section></article> <button @click="admin = !admin">Flip permissions</button></div></template><script>export default{name: 'app', data (){  return{   admin: true    }  }}</script>

For example, if we had a data variable that allowed us to determine whether someone was an administrator, we'd be able to use v-show to only show protected content to appropriate users:

Notice how, ...