首页 > Web开发 > 详细

vue.js

时间:2019-10-20 20:37:24      阅读:39      评论:0      收藏:0      [点我收藏+]

遍历循环数组:

   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>

 

vue.js

原文:https://www.cnblogs.com/shandayuan/p/11708550.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!