SOURCE

new Vue({
    el: "#app",
    data: {
        arr: ["HTML", "CSS", "JS", "JQ", "VUE"],
        obj: {
            Rocket: "McGrady",
            Lakers: "Kobe",
            Mavericks: "Nowitzki",
        },
        str: "abc",
        num: 3
    }
})

<div id="app">
    <ul>
        <li v-for = "item in arr">{{ item }}</li>
    </ul>
    <br/>
    <ul>
        <li v-for = "(item, index) of arr">{{ index + "-" + item }}</li>
    </ul>
    <br/>
    <ul>
        <li v-for = "value in obj">{{ value }}</li>
    </ul>
    <br/>
    <ul>
        <li v-for = "(value, key) in obj">{{ key + "-" + value }}</li>
    </ul>
    <br/>
    <ul>
        <li v-for = "(value, key, index) in obj">{{index + "-" + key + "-" + value }}</li>
    </ul>
    <br/>
    <ul>
        <li v-for = "(char, index) in str">{{ index + "-" + char }}</li>
    </ul>
    <br/>
    <ul>
        <li v-for = "n in num">{{ n }}</li>
    </ul>
    
   <h3>super star in NBA team</h3>
    <template v-for = "(starName, teamName) in obj">
        <p>team name: {{ teamName }}</p>
        <p>super star: {{ starName }}</p>
    </template>
</div>