vue中的v-for循环并获取彼此相邻的图像

gk7wooem 于 2023-02-05 发布在 Vue.js

关注(0)|答案(1)|浏览(125)

所以我在vue的js端有这个数组，图像是上下对齐的，我想让它上下对齐，我在scss中使用flexbox来显示它，但是行不工作，我做错了什么？
JS系统

shop_items:
                [
                    { image_path:"thumb.php?src=./assets/dog.jpg&size=640x480"},
                    { image_path:"thumb.php?src=./assets/cat.jpg&size=640x480"}
                ]

超文本标记语言

<div class="animal_list" v-for="item in shop_items>
        <img class="image" :src="item.image_path">
    </div>

S CSS

.animal_list{
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
}

vue.js

来源：https://stackoverflow.com/questions/62049745/v-for-loop-in-vue-and-to-get-image-next-to-each-other

1条答案

按热度按时间

pdsfdshx1#

您的v-for位置错误。您正在为数组的每一项创建新的div元素。
你必须创建一个div和它里面的许多图像。见下面的代码：

<template>
  <div>
    <div class="animal_list">
      <template v-for="item in shop_items">
        <img class="image" :src="item.image_path" />
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    shop_items: [
      {
        image_path:
          'https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg',
      },
      {
        image_path:
          'https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg',
      },
    ],
  }),
};
</script>

赞(0）回复(0）举报 2023-02-05

我来回答

vue中的v-for循环并获取彼此相邻的图像

1条答案

相关问题

热门标签

最新问答