JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<div id="app">
  <h1>{{ title }}</h1>
  <button v-on:click="show">Show</button>
  <p v-if="showParagraph">Test paragraph</p>
</div>

JavaScript

new Vue({
	el:"#app",
  data:{
  	title: 'The VUE INSTANCE',
    showParagraph: false
  },
  methods:{
  	show: function(){
    	this.showParagraph = true;
      this.updateTitle('The Vue instance was updated')
    },
    updateTitle: function(i){
    	this.title = i;
    }
  },
  computed: {
  	lowercaseTitle: function(){
    	return this.title.toLowerCase();
    }
  },
  watch: {
  	title: function(i){
    	alert('title changed' +' '+ i);
    }
  }
})