JSFiddle - React, Tailwind, and code Playground

by Federico

HTML

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

<div id="app">
    <ul>
        <li v-for="title in movieTitles">{{ title }}</li>
    </ul>
    <hr>
    <table border="1">
        <thead>
            <tr>
                <th>Name</th>
                <th>Title</th>
                <th>Company</th>
                <th>Index</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(employee, index) in employees">
               <td>{{ employee.name }}</td>
               <td>{{ employee.title }}</td>
               <td>{{ companyName }}</td>
               <td>{{ index +1 }}</td>
            </tr>
        </tbody>
    </table>
    <hr>
    <ul>
        <li v-for="(value, key, index) in person">
            ({{ index + 1 }}) {{ key }}: {{ value }}
        </li>
    </ul>
    <hr>
    <ul>
        <li v-for="(n, index) in 10">
            {{ n }} * {{ index }} = {{ n * index }}
        </li>
    </ul>
</div>

JavaScript

new Vue({
    el: '#app',
    data: {
        movieTitles: ['The Matrix', 'The Matrix Reloaded', 'The Matrix Revolution'],
        employees: [
            {name: 'Federico', title: 'Father'},
            {name: 'Laura', title: 'Mother'},
            {name: 'Margherita', title: 'Daughter'}
        ],
        companyName: 'Rome',
        person: {
            firstName: 'Federico',
            lastName: 'Taddei',
            age: '41'
            
        }
    },
    methods: {
        
    }
});