如何在 Vue3.js 中將多個 div 和 img 標簽附加到父 div？

Question

我是 vue.js 框架的新手。 我正在嘗試使用 vue3.js 將多個子標簽附加到父 div

標記是這樣的：

<div class="partner-slider"> <!--this is parent div-->
  <!--these are children-->
  <!-- <div class="slide">
    <img src="../assets/img/partner/0.png" />
  </div>
  <div class="slide">
    <img src="../assets/img/partner/1.png" />
  </div>
  <div class="slide">
    <img src="../assets/img/partner/2.png" />
  </div> -->
</div>

在 vanillaJs 中，我這樣做了，而且效果很好

var mHtml = "";
for (var i = 0; i < 41; i++) {
  mHtml +=
    '<div class="slide"><img src="../assets/img/partner/' + i + '.png"></div>';
}
$(".partner-slider").append(mHtml);
$(document).ready(function () {
  $(".partner-slider").slick({
    infinite: true,
    slidesToShow: 4,
    slidesToScroll: 1,
    //draggable: false,
    //pauseOnHover: true,
    speed: 1000,
    autoplay: true,
    autoplaySpeed: 600,
  });
});

但是在 Vue.js 環境中，上面的腳本不起作用，它說找不到圖像 (404)。 如何動態地將圖像附加到父 div，以便在加載所有圖像后可以使用光滑的滑塊？

我試圖使用 v-for 方法並做了

<script>
export default {
  data() {
    return {
      partners: [
        { url: "../assets/img/partner/0.png" },
        { url: "../assets/img/partner/1.png" },
        { url: "../assets/img/partner/2.png" },
        { url: "../assets/img/partner/3.png" },
      ],
    };
  },
};
</script>

但考慮到我應該以相同的方式附加 41 張圖像，這看起來效率很低。

Answer 1

您可以使用所需長度的數字創建一個數組，該數組將用於在圖像路徑中生成文件名：

export default {
  data() {
    return {
      partners: [...Array(10).keys()].map(num => ({
        url: `../assets/img/partner/${num}.png`,
      }))
    };
  },
};

然后使用v-for for 渲染它：

<div
  v-for="path in data"
  :key="path"
  class="slide"
>
  <img src="path" />
</div>