uni-app v-for用法

存在以下变量

       data() {
            return {
                stuArray:[
                    {name:"张三",age:12,skills:["Java","C#","Python"]},
                    {name:"李四",age:13,skills:["Sing","Dance","Rap","Basketball"]},
                    {name:"王五",age:14,skills:["Piano","Guitar","Trumpet"]}
                ]
            }
        },

 

使用v-for

<view>
        <view v-for="(stu,index) in stuArray">
            <view>{{"姓名:"+stu.name+",年龄:"+stu.age+",序号:"+index}}</view>
            <view>
                擅长技能:
                <block v-for="sk in stu.skills">
                    {{sk}},
                </block>
            </view>
        </view>
    </view>

这里有几点需要注意

1.不要对初始的view进行任何操作，否则会报错。必须在里面重新定义view标签

2.这里遍历技能的时候使用block标签。这样做的目的是：

如果使用view标签，那么每个技能都会重新占领一行，不美观。而使用block会将所有遍历的元素排列在一起，视为行内元素。

 

 

最后的输出如下：