JSFiddle - React, Tailwind, and code Playground

by ginpei

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.min.js"></script>
<div id="app">
  <h1>{{message}}</h1>
  <p>
    <input v-model.number="num" type="number" /> x 2 = {{twice}}
  </p>
  <ul>
    <li v-for="f in fruits">{{f}}</li>
  </ul>
  <p>
    <button v-on:click="onclick">Toggle</button>
  </p>
  <div v-bind:class="{ 'is-hidden': !visible }">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem velit ut corporis eveniet, necessitatibus enim. Aut, voluptatum eveniet accusantium voluptas excepturi vero reprehenderit sapiente nostrum non voluptates. Provident, aliquam, asperiores?
  </div>
</div>

CSS

.is-hidden {
  display: none;
}

JavaScript

var app = new Vue({
	el: '#app',
  data: {
  	fruits: [ 'apple', 'banana', 'grape' ],
  	message: 'Hello World!',
  	num: 100,
    visible: false,
  },
  computed: {
  	twice: function() {
    	return this.num * 2;
    },
  },
  methods: {
  	onclick: function(event) {
    	this.visible = !this.visible;
    },
  },
});