JSFiddle - React, Tailwind, and code Playground

by cheongjin kim

HTML

<script src="https://unpkg.com/[email protected]"></script>
<div id="app">
   <user v-bind:user="user"></user>
   <p>
     ----------
   </p>
   <user-v2 v-bind:name="user.name" v-bind:age="user.age"></user-v2>
</div>

<template id="user-template">
  <div v-if="name">
    my name is {{ name }}
    <div>
     {{ age }} | {{ job }}
    </div>
  </div>
  <div v-else>
    Loading...
  </div>
</template>

<template id="user-v2-template">
  <div v-if="name">
    {{ name }} | {{ age }}
  </div>
  <div v-else>
    Loading...
  </div>
</template>

JavaScript

var UserComponent = Vue.component('user', {
	template: '#user-template',
	props: ['user'],
  computed: {
  	name: function () {
    	return this.user.name
    },
    age: function () {
    	return this.user.age
    },
    job: function () {
    	return this.user.job
    }
  }
})

var UserComponent2 = Vue.component('user-v2', {
	template: '#user-v2-template',
  props: ['name', 'age']
})

new Vue({
	el: '#app',
  data: function () {
  	return {
    	user: {}
    }
  },
  mounted: function () {
  	var vm = this
  	setTimeout(function () {
    	vm.user = {
      	name: 'jin',
        age: '31',
        job: 'developer'
      }
      
      setTimeout(function () {
      	vm.user = {
        	name: 'hello',
          age: '10',
          job: 'slave'
        }
      }, 2000)
    }, 1000)
  },
  components: {
  	'user': UserComponent,
    'user-v2': UserComponent2
  }
})