JSFiddle - React, Tailwind, and code Playground

by Bo Andersen

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <h1>Movies</h1>
  
  <ul>
    <li v-for="title in movieTitles">{{ title }}</li>
  </ul>
  
  <h1>Employees</h1>
  
  <table border="1">
    <thead>
      <tr>
        <td>Name</td>
        <td>Title</td>
        <td>Company</td>
      </tr>
    </thead>
    <tbody>
      <tr v-for="employee in employees">
        <td>{{ employee.name }}</td>
        <td>{{ employee.title }}</td>
        <td>{{ companyName }}</td>
      </tr>
    </tbody>
  </table>
</div>

JavaScript

new Vue({
	el: '#app',
  data: {
  	movieTitles: ['The Matrix', 'The Matrix: Reloaded', 'The Matrix Revolutions'],
		employees: [
    	{ name: 'Abby', title: 'Accountant' },
      { name: 'Andy', title: 'Marketing Manager' },
      { name: 'Brandon', title: 'Vue.js Expert' }
    ],
    companyName: 'VueX Ltd.'
  }
});