Vue

by WILLIAM CORREA

HTML

<div class="wrapper">
  <div id="app"></div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
}

.wrapper {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

Vue

Vue.directive('visibility', (el, binding) => {
  var value = binding.value;

  if (!!value) {
    el.style.display = 'inherit';
    return
  }
  el.style.display = 'none';
})

new Vue({
  el: "#app",
  data: () => ({
  	visibility: true
  }),
  render (hiperScript) {
    // v-show
    return hiperScript(
    	'div',
      [
        hiperScript(
          // component
          'div',
          { directives: [{name: "visibility",value: this.visibility}]
          },
          // content / options
          'Hello World!'
        ),
        hiperScript(
          // component
          'input',
          {
            attrs: {type: 'checkbox', checked: this.visibility},
            on: {input: e => {this.visibility = e.target.checked}}
          }
        )
      ]
    )
  }
})