v-for遍历元素样式失效

最新推荐文章于 2023-02-14 15:49:01 发布

小白目

最新推荐文章于 2023-02-14 15:49:01 发布

阅读量986

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_37974755/article/details/125666232

vue 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了如何使用CSS Flexbox布局来实现多个盒子并排展示的效果。通过设置`display: flex`和`justify-content: space-between`属性，可以轻松地在一行中均匀分布元素。同时，文章指出了在Vue模板结构中，应该将Flex布局样式应用到外层容器而不是`v-for`循环内的元素，以避免布局错误。正确的结构是在`v-for`外层添加一个包裹元素并设置样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要实现一下效果布局：

对于多个盒子并排，通常会用到flex布局，css如下：

  .friends {
    display: flex;
    justify-content: space-between;
    padding-top: 3.41rem;
    padding-left: 0.73rem;
    width: 6.1rem;

    .item {
      overflow-x: scroll;

      .photo {
        width: 1.2rem;
        height: 1.2rem;
      }

      .name {
        width: 1.13rem;
        height: 0.39rem;
      }
    }
  }

关键是给谁设置 display：flex ！！

结构错误写法：给v-for那层的盒子加样式

         <div>
          <div
            class="friends"
            v-for="(item,index) of friends"
            :key="index"
          >
            <div class="item">
              <div
                v-image.normal="item.photo"
                class="photo"
              />
              <div class="name">
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>

结构正确写法：在v-for外层再套一个盒子设置样式

        <div class="friends">
          <div
            v-for="(item,index) of friends"
            :key="index"
          >
            <div class="item">
              <div
                v-image.normal="item.photo"
                class="photo"
              />
              <div class="name">
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>