vue2.0でループトラバーサルを実装する方法

今回は、vue2.0のループトラバーサルの実装方法と、vue2.0のループトラバーサルを実装するための注意事項について説明します。以下は実際のケースです。見てみましょう。 。

デモ:

    <p v-for="item in temps" :key="item.id">
     <p class="contract-item">
       <img :src="item.imgUrl">
     </p>
    </p>

画像を紹介します。パスに注意してください:

import con1 from "@/assets/img/con01.png";
import con2 from "@/assets/img/con02.png";
import con3 from "@/assets/img/con03.png";

画像のロード場所:

 temps: [
    {
     imgUrl: con1
    },
    {
     imgUrl: con2
    },
    {
     imgUrl: con3
    },
   ],

このようにして、ループトラバーサル中にさまざまな画像をロードできます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

HTMLでのv-forインデックスの使用

CSS参照画像がパッケージ化された後にリソースファイルが見つからない場合があります

以上がvue2.0でループトラバーサルを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。