Vueの演習7：02_11_画像経路変更の上にマウス

デモオンラインアドレス：
https://sx00xs.github.io/test/17/index.html
----------------------------- ----------------------------------
IDE：VSCode
ファイル形式：.vue
に完成する決意:(）

<テンプレート> 
  <DIV ID =アプリ> 
    <ULクラス=ボックス> 
      <LIクラス=第一> <IMG負荷= "handleLoad" @：SRC = "imgBig"> <DIV：クラス= "{電流：isComplete}"> < / DIV> </ LI> 
      <LIのV- ため "リストで（アイテム、インデックス）" =：キー= "インデックス"> 
        <a href=#> 
          <IMG：SRC = "item.src"マウスオーバー= "handleOver @ （インデックス）」> 
        </a>の
      </ LI> 
    </ UL> 
  </ div> 
</テンプレート> 
<スクリプト> 
輸出デフォルト{ 
  データ：関数（）{
     リターン{ 
      isComplete：偽、
      imgBig：必要（ './assets/lesson2/big_1.jpg'）、
      リスト：[ 
        {SRC：（必要 './assets/lesson2/small_1.jpg' ）}、
        {SRC：（必要 './assets/lesson2/small_2.jpg' ）}、
        {SRC：（必要」./assets /lesson2/small_3.jpg ' ）}、
        {srcは（必要 ./assets/lesson2/small_4.jpg' ' ）}、
        {SRC：（必要 ' ./assets/lesson2/small_5.jpg」）}、
        {SRC （必要 './assets/lesson2/small_6.jpg' ）}、
        {SRC：（必要 './assets/lesson2/small_7.jpg' }）、
        {Srcは：（必要」./assets/lesson2/small_8。 JPG 'は）}、
        {SRC：（必要 '。/assets/lesson2/small_9.jpg」）}、
        {srcは：必要（ './assets/lesson2/small_10.jpg' ）}、
        {SRC：（必要 './assets/lesson2/small_11.jpgを' ）} 
      ]、
      listsBig：[ 
        {Srcは：（必要 './assets/lesson2/big_1.jpg' ）}、
        {srcは：（必要 './assets/lesson2/big_2.jpg' ）}、
        {Srcは：（必要 './assets/lesson2/big_3.jpg' ）}、
        {SRC：（必要 './assets/lesson2/big_4.jpg' ）}、
        {SRC：（必要 './assets/lesson2/big_5.jpg' }）、
        {SRC：（必要」./assets/ lesson2 / big_6.jpg」）}、
        {SRC：（必要'./assets/lesson2/big_7.jpg' ）}、
        {srcは：（必要 './assets/lesson2/big_8.jpg' ）}、
        {Srcは：（必要 './assets/lesson2/big_9.jpg' ）}、
        {SRC：必要（ './assets/lesson2/big_10.jpg' ）}、
        {SRC：必要（ './assets/lesson2/big_11.jpg' ）} 
      ] 
    } 
  }、
  メソッド：{ 
    handleOver（インデックス） { 
      VARの IMG = 新しいイメージ（）。
      
      img.src = この .imgBig = この.listsBig [インデックス] .SRC。
      
      この .isComplete = 真; 
      img.complete？（この .isComplete = 偽）：この.handleLoad（）; 
    }、
    handleLoad（）{ 
      この .isComplete = 偽。
    } 
  } 
}
 </ SCRIPT>