Question

我想通过迭代数组中的所有图像名称来将所有图像显示到轮播中。但我不仅要迭代img，还要迭代包装图像的div。但是我不知道如何。这是我最近的代码：

<div class="main-image owl-carousel" v-for="(item, index) in iCarImage">
    <div class="item-slide">
        <img v-bind:src="item.ImagePath" alt=""/>
     </div>
</div>

此代码的结果如下：

<div class="main-image owl-carousel">
    <div class="item-slide">
        Image 1
        Image 2
        Image 3
        Image 4
     </div>
</div>

我期望的结果

<div class="main-image owl-carousel">
    <div class="item-slide">
        Image 1
     </div>
 <div class="item-slide">
        Image 2
     </div>
 <div class="item-slide">
        Image 3
     </div>
 <div class="item-slide">
        Image 4
     </div>
</div>
````
Need your help. Any of your response will be appreciated. thanks in advance

Answer 1

这是一个简单的示例...请注意，每个.item-slide div都是您所期望的，如红色边框所示

new Vue({
  el: "#app",
  data: {
    urls: [
      "https://via.placeholder.com/100",
      "https://via.placeholder.com/200",
      "https://via.placeholder.com/300"
    ]
  }
})

#app {
  display:flex;
}
.item-slide {
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="item-slide"  v-for="url in urls">
    <img v-bind:src="url" alt=""/>
  </div>
</div>

不仅迭代数组值，还迭代<div> </div>

1 个答案: