JSFiddle - React, Tailwind, and code Playground

by Alex Babakhanov

HTML

<script src='https://unpkg.com/[email protected]/dist/vue.js'></script>

<div id='app'>
  <h1>Users</h1>
  <my-component name="Just raw string"></my-component>
  <my-component v-for='user in users' :name="user.name" :age='user.age'></my-component>
</div>

JavaScript

var myComponent =  {
  template: '<h2>{{info}}</h2>',
  props: {
    name: {
      type: String,
      required: true
    },
    age: {
      type: Number,
      default: 44
    }
  },
  data: function () {
    return {
      info: this.name + 'is ' + this.age + ' years old!'
    };
  }
};

new Vue({
  el: '#app',
  components: {
    'my-component': myComponent
  },
  data: {
    users: [
      {name: 'Elvis Presley'},
      {name: 'Mickey Mouse', age: 100},
      {name: 'Lady Gaga', age: 30 }
    ]
  }
});