VUE基础知识4：数组的循环v-for_vue for循环数组

一、使用v-for循环数据

<div id="app">
    <ul>
        <li v-for="(p, index) in person">{
  {p.name}} {
  {index+1}}</li>
    </ul>
</div>
 
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            person: [
                {name: '杰克'},
                {name: '罗斯'},
                {name: '迈克'}
            ]
        }
    })
</script>

建议使用 in

二、使用v-for循环二维数组

<div id="app">
    <ul>
        <li v-for="(p, index) in person">
            {
  {p.name}} {
  {index+1}}
 
            <ul>
                <li v-for="(c,cIndex) in p.color">{
  {c}} {
  {index+1}}.{
  {cIndex+1}}</li>
            </ul>
        </li>
    </ul>
</div>
 
<script>