JSFiddle - React, Tailwind, and code Playground

by budiadiono

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.min.js"></script>
<div id="app"></div>

JavaScript

var App = Vue.extend({
	template: `
  <div>
  	<input type="text" v-model="message">
    <button v-on:click="clear">Clear</button>
    <div>{{status}}</div>
  </div>`,
	data: function() {
		return {
			message: 'Hello!'
		}
	},
  computed: {
  	status: function() {
    	return this.message.length < 15 ? 'Too short... type some more...' : 'Alright, stop typing now..'
    }
  },
	methods: {
		clear: function() {
			this.message = ''
		}
	}
})

new App().$mount('#app')