Vue カードスタイルのクリックして切り替える画像コンポーネントの使用方法の詳細な説明

<テンプレート>
 <!-- 
 *データ駆動型のカード形式の画像表示（アニメーションなし）
 * -->
 <div class="cardBanner">
   <ul>
    <li v-for="(item,index) in cardData" :key="index">
     <a href="#">
      <img :src="item.src" alt="">
      <p>この画像の説明 {{item.order}}</p>
     </a>
    </li>
    <div class="arrow-left" @click="toggleFun(-1)">&lt;</div>
    <div class="arrow-right" @click="toggleFun(1)">&gt;</div>
   </ul>
 </div>
</テンプレート>

<スクリプト>
 エクスポートデフォルト{
  データ（）{
   戻る {
    カードデータ: [
     {id:1,src:require('../assets/images/banner.jpg'),},
     {id:2,src:require('../assets/images/text.jpg')},
     {id:3,src:require('../assets/images/[email protected]')},
     {id:4,src:require('../assets/images/text.jpg')},
     {id:5,src:require('../assets/images/banner.jpg')}
    ]
   }
  },
  メソッド: {
   //ビューの変更を実現する関数を介してデータを変更するtoggleFun(p){
    this.cardData = this.cardData.map((item,index,array) => {
     if(index===array.length-1&&p===1){
      項目 = 配列[0]
     }
     そうでない場合(インデックス===0&&p===-1){
      項目 = 配列[配列.長さ-1];
     }それ以外{
      項目 = 配列[インデックス+p];
     }
     返品商品;
    })
   }
  }
 }
</スクリプト>

<スタイルスコープ>
.カードバナー{
 パディング: 10px 30px;
 背景色: #fff;
 境界線: 1px 実線 #ccc;
 位置: 相対的;
}
.cardBanner ul{
 ディスプレイ: フレックス;
 overflow: scroll; /*スクロールバーを設定する*/
}
.cardBanner ul::-webkit-scrollbar{ /*スクロールバーを非表示*/
 表示: なし;
}
.cardBanner ul>li{ //高エネルギー部分、フレックスは説明しにくい width: 31.33333%;
 フレックス収縮: 0;
 左パディング: 3%;
 テキスト配置: 中央;
}
.cardBanner ul>li:first-child{
 左パディング: 0;
}
.cardBanner ul>li a{
 表示: ブロック;
 幅: 100%;
 高さ: 100%;
}
.cardBanner ul>li img{
 幅: 100%;
 高さ: 170ピクセル;
 境界線の半径: 5px;
}
.cardBanner ul>li p{
 マージン: 0;
}
[クラス^='矢印']{
 フォントサイズ: 30px;
 変換: scaleX(.7);
 色: #ddd;
}
.矢印左{
 位置: 絶対;
 左: 5px;
 上位: 50%;
 上マージン: -17px;
}
.矢印右
 位置: 絶対;
 右: 5px;
 上位: 50%;
 上マージン: -17px;
}
</スタイル>