Vue.jsは9グリッド画像表示モジュールを実装します

<テンプレート>
<div class="SongList">
//v-for ループを使用してサムネイルをレンダリングします <div class="covers" :style="{display:MinDisplay}">
         <div class="cover" v-for="(img,index) in imgs" :key='img'><img :src="img.src" width="90%" class="min" @click="ZoomIn(index)" alt=""></div>
       </div>
 // 拡大した画像をレンダリングします <div class="max" :style="{display:display}">
            <div @click="ZoomOut" v-for="(img,index) in imgs" :key='img' :class="[index===ShowIndex?'active':'None']" ><img :src="img.src" width="100%"></div>
            //拡大画像の下のナビゲーションマップ <div class="small">
                <div :class="[{'smallActive':index===ShowIndex},'cover-small']" v-for="(img,index) in imgs" :key='img' @click="select(index)" ><img :src="img.src" width="90%"></div>
            </div>
        </div>
    </div>
</テンプレート>

<スタイルスコープ>
    .SongList{
        幅: 40%;
    }
    .カバー{
        ディスプレイ: フレックス;
        コンテンツの両端揃え: スペースの間;
        flex-wrap: ラップ;
    }
    。カバー{
        ディスプレイ: フレックス;
        コンテンツの中央揃え: 中央;
        幅: 33%;
        マージン: 10px 0;
    }
    .分{
        境界線の半径: 10px;
        カーソル: ズームイン;
    }
    .max{
        カーソル: ズームアウト;
        幅: 100%;

    }
    。小さい{
        ディスプレイ: フレックス;
        コンテンツの両端揃え: スペースの間;
        flex-wrap: ラップ;
    }
    .カバー-small{
        ディスプレイ: フレックス;
        コンテンツの中央揃え: 中央;
        幅: 10%;
        マージン: 10px 0;
        不透明度: 0.6;
        カーソル: ポインタ;
    }
    .cover-small:hover{
        不透明度: 1;
    }
    。アクティブ{
        ディスプレイ: フレックス;
    }
    。なし{
        表示: なし;
    }
    .smallActive{
        不透明度: 1;
    }

</スタイル>

<スクリプト>
    エクスポートデフォルト{
        名前: "SongList",
        データ:関数() {
            戻る {
                表示インデックス:0,
                表示: 'なし'、
                最小表示: 'flex'、
                // Vue テンプレートで v-for ループを使用して画像をレンダリングする場合、画像ファイルのローカルの場所を直接使用することはできません。imgs:[
                    {"src":require('***.jpg')},
                    {"src":require('***.jpg')},
                    {"src":require('***.jpg')},
                    {"src":require('***.jpg')},
                    {"src":require('***.jpg')},
                    {"src":require('***.jpg')},
                    {"src":require('***.jpg')},
                    {"src":require('***.jpg')},
                    {"src":require('***.jpg')},
                ]

            };
        },
        方法:{
            ズームイン(i){
               this.display='ブロック';
                this.MinDisplay='なし';
                this.ShowIndex=i;
            },
            ズームアウト(){
                this.display='なし';
                this.MinDisplay='flex';
            },
            選択(i){
                this.ShowIndex=i;


            }
        }
    }