关于 v-for 标签的笔记

在完成一个公司官网的时候，需要把一个固定内容改为动态，其中对一个双重数组数据的展示的时候出现了一个憨批问题

参数结构是这样的.

 service: {
        title: "Services",
        body: "We Love What we do. We don’t do what we’re not good at.",
        service: [
          {
            serviceImage: "/assets/dev.svg",
            name: "Design",
            tag: [
              'UI & UX',
              'Brand Identity',
              'Mobile APPs',
              '3D Designs',
              'Packaging',
              'Motion Designs'
            ]
          },
         {...},
         {...}
       	]}

反正就是数组，我当时写的循环是这样的

<!--服务展示区-->
        <div class="services_inner" v-for="(item,index) in this.service.service" :key="item.name">
          <!--一个服务块box-->
          <div class="services_box" :data-aos="index%2===0?'slide-left':'slide-right'">
            <div class="services_thumb">
              <img :src="item.serviceImage" alt=""/>
            </div>
            <div class="services_content">
              <h3>{{ item.name }}</h3>
            <!--服务中的服务详情清单-->
              <ul v-for="tag in item.tag">
                <li>{{ tag }}2</li>
              </ul>
              <!--跳转按钮-->
              <a href="/contact" class="btn-link"
              >Explore<img src="/assets/next_arrow.png" alt=""
              /></a>
            </div>
          </div>
        </div>

结果成了这个效果，

[#不是对象就无需给key了]
错误：
v-for ="item int list" :key="item.key"
v-for ="(item,index) int list" :key="item.key"
这种循环遍历标签的方式，是循环创造当前标签。也就是说，你的v-for写在哪个地方就会循环创建当前标签，并不是我之前理解的像java一样创建一个for循环，然后在循环内进行编辑
比如

<ul v-for="item in lis" :key="item.key">
   <li>{{ item }}</li>
</ul>

创建出的其实是

<ul>
   <li>{{ item }}</li>
</ul>
<ul>
   <li>{{ item }}</li>
</ul>
<ul>
   <li>{{ item }}</li>
</ul>
<ul>
   <li>{{ item }}</li>
</ul>

所以最终展示效果就成了
· item
· item
· item
· item
应该这样写

<ul >
   <li v-for="item in lis" :key="item.key" >{{ item }}</li>
</ul>

这样渲染出来就是

<ul >
   <li>{{ item }}</li>
   <li>{{ item }}</li>
   <li>{{ item }}</li>
   <li>{{ item }}</li>
</ul>

这样就和前端原本编辑的结构一样了，也能成功展示
·item ·item
·item ·item

---

所以对上面的代码做出更改

<!--服务展示区-->
        <div class="services_inner">
          <!--一个服务块box-->
          <div class="services_box"  v-for="(item,index) in this.service.service" :key="item.name" :data-aos="index%2===0?'slide-left':'slide-right'">
            <div class="services_thumb">
              <img :src="item.serviceImage" alt=""/>
            </div>
            <div class="services_content">
              <h3>{{ item.name }}</h3>
            <!--服务中的服务详情清单-->
              <ul>
                <li v-for="tag in item.tag">{{ tag }}2</li>
              </ul>
              <!--跳转按钮-->
              <a href="/contact" class="btn-link"
              >Explore<img src="/assets/next_arrow.png" alt=""
              /></a>
            </div>
          </div>
        </div>

渲染结果：

这样创建出的就不再是一个一个的服务展示区，而是服务展示区内的一个一个服务展示块，同样的服务内容也改成了一个一个的服务，而不是以一个一个的服务内容展示区，

总结：
v-for并不是创建一个循环在里面操作，而是循环创建当前标签并把数据加以使用
补充：
··如果是对象集合需要指明key
··如果需要获得索引可以使用v-for="(item,index) in list"获取索引index