JSFiddle - React, Tailwind, and code Playground

by nachocab

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js "></script>
<div id="app">
   <p>My name is {{ name }}</p>
   
   <p v-cloak>My name is {{ name }}</p>
   
   <p v-text="`My name is ${ name }`"></p>
   
   <p v-cloak>{{ getName() }}</p>
   
   <p v-if="name"> My name is {{ name }}</p>
</div>

CSS

[v-cloak] { 
  display: none 
}

JavaScript

new Vue({
	el: '#app',
  data: {
    name: null,
  },
  
  created() {
  	this.sleep(1000).then(() => {
		   this.name = "Joe"
		});
  },
  
  methods: {
    sleep(ms) {
		  return new Promise(resolve => setTimeout(resolve, ms));
		},
    
    getName() {
      return `My name is ${this.name}`
    }
    
  }
})