vue.js

遍历循环数组:

   v-for

    <div id="app">
            <p v-for="item in list">{{item}}</p>
            
            <p v-for="(item,i) in list">索引值:{{i}} --- 每一项: {{item}}</p>
        </div>

        <script>
            var vm = new Vue({
                el:'#app',
                data:{
                    list:[1,2,3,4,5,6]
                    
                }
            })
        </script>
     <div id="app">
            <p v-for="item in list">Id: {{item.id}}---name: {{item.name}}</p>
        </div>

        <script>
            var vm = new Vue({
                el:'#app',
                data:{
                    list:[
                        { id: 1, name:'zs1'},
                        { id: 2, name:'zs2'},
                        { id: 3, name:'zs3'},
                        { id: 4, name:'zs4'}
                    ]
                }
            })
        </script>
     <div id="app">
            <p v-for="(val,key) in user">值是:{{val}}----键是:{{key}}</p>
        </div>

        <script>
            var vm = new Vue({
                el:'#app',
                data:{
                    user:{
                        id:1,
                        name:'托尼,屎大颗',
                        gender:''
                    }
                }
            })
        </script>
     <div id="app">
            <!--in 后面放普通数组 ,对象数组,对象,还可以放数字-->
            <!--注意:如果使用 v-for 迭代数字的话 前面的 count 值从1开始-->
            <p v-for="count in 10">这是第{{count}}次循环</p>
        </div>

        <script>
            var vm = new Vue({
                el:'#app',
                data:{
                    
                }
            })
        </script>
原文地址:https://www.cnblogs.com/shandayuan/p/11708550.html