VUE v-for的使用

v-for=‘变量 in 列表’

1.v-for循环普通数组

 <div id="app">
        <ul>
            <li v-for='item in text '>{{item}}  </li>  <!--发现v-for Vue进行解析   Mustache 胡须-->
        </ul>
    </div>

        var app=new Vue({
            el:"#app",
            data:{
              text:['1','2','3','4','5','6']
            }
        })

执行结果

2.v-for加上索引值

 <div id="app">
        <ul>
            <li v-for='(item,i) in text '>索引值：{{i}}    内容：{{item}}</li>  <!--发现v-for Vue进行解析   Mustache 胡须-->
        </ul>
    </div>

var app=new Vue({
            el:"#app",
            data:{
                text:['1','2','3','4','5','6']
            }
        })

3.v-for对象数组

 <div id="app-2">
        <p v-for="(item,i) in text">索引:{{i}} Id:{{item.id}}   name:{{item.name}}</p>
    </div>

 var app2=new Vue({
            el:"#app-2",
            data:{
                text:[
                    {id:1,name: 'name1'},
                    {id:2,name: 'name2'},
                    {id:3,name: 'name3'},
                ]
            },
        })

4.循环数字

    <div id="app-3">
        <p v-for="count in 4">这是第{{count}}个数</p>
    </div>

 var app3=new Vue({
            el:"#app-3",
            
        })