Vue.JS toggle for show/hide

by devdev

HTML

<div id="vue">
  <button v-on:click="shown=!shown">Click Me to {{label}}</button>
  <span v-if="shown">text to show or to hide</span>
</div>

JavaScript

new Vue({
  el: '#vue',
  data: {
    shown: false,
  },
  computed: {
    label: function() {
      return this.shown ? 'HIDE' : 'SHOW'
    },
  },
})