v-for 用法

最新推荐文章于 2025-09-05 21:49:48 发布

原创最新推荐文章于 2025-09-05 21:49:48 发布 · 600 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

v-for的几种用法

v-for =“site in sites” sites 是进行迭代的数组，site是迭代出的数据

1.迭代普通数组

<p v-for="site in sites">{{sites:name}}</P>
 <script>
        var  a = new Vue({
            el:".app",
            data:{
            
            sites:[
                    "dfdfdsfs",
                    "dfdfecccc",
                    "33333333"
                ]
                
            }   
        })
    </script>

2 . 迭代数字

<p v-for="n in 14 ">{{n}}</P>

3 迭代对象
迭代对象就是site中是迭代一对键值对

 <li v-for="(val,key) in sites">
                {{val}} {{key}}
            </li>

        </ul>
    </div>
    <script>
        var  a = new Vue({
            el:".app",
            data:{
                ok:false,
                sites:{
                    id:1,
                    name:'托尼.贾',
                    gender:'男'
                }

4 迭代对象数组

对象数组就是数组中的每一个元素都是类的对象

<li v-for="(user,i) in sites">
                {{user.id}} {{user.name}}
            </li>
             data:{
                ok:false,
                sites:[
                    {id:1, name:'zs1'},
                    {id:2, name:'zs2'},
                    {id:3, name:'zs3'},
                    {id:4, name:'zs4'},
                    {id:5, name:'zs5'},
                    {id:6, name:'zs6'},
                    ]
            }
        })