デモオンラインアドレス：
https://sx00xs.github.io/test/16/index.html
----------------------------- ----------------------------------
IDE：VSCode
ファイル形式：.vue
に完成する決意:(）
<テンプレート>
<DIV ID =アプリ>
<DIVクラス=アウター>
<H2>名车车标展示-鼠标移过显示车标</ H2>
<UL>
<LIのV- ためのリストで（項目、インデックス）」= "キー= item.title：クラス=" {のZIndex：item.isActive} ">
<a href=# :title= item.title
@mouseover ="handleAover(index)"
@mouseout
="handleAout(index)"> <strong>の{{item.name}} </ strong>の{{item.val}} </a>の
< IMG
@mouseover = "handleAover（インデックス）"
@mouseout = "handleAout（インデックス）"
。クラス= "{電流：item.isActive}" SRC = item.src：ALT = item.title>
</ LI>
</ UL>
</ DIV>
</ DIV>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
データ：機能（）{
リターン{
リスト：[
{
タイトル：「BMW BMW」、
名： 'BMW' 、
ヴァル： 'BMW' 、
SRC：（必要 './assets/lesson2/1.jpg' ）
のisActive：falseに、
}、
{
タイトル： 'アルファロメオアルファ-ロミオ' 、
名称： 'アルファロメオ'アルファロメオ" 、
時間：'アルファ-ロミオ' 、
SRC：（必要 './assets/lesson2/2.jpg' ）
のisActive：falseに、
}、
{
タイトル： 'スコダスコダ' 、
名称： 'スコダ' 、
ヴァル： 'スコダ' 、
SRC：（必要 './assets/lesson2/3.jpg' ）
のisActive：falseに、
}、
{
タイトル： 'フォルクスワーゲンVW' 、
名称： 'フォルクスワーゲン' 、
ヴァル： 'VW'フォルクスワーゲン、
SRC：必要（'./assets/lesson2/4.jpg' ）、
のisActive：falseに
}、
{
タイトル： 'サーブサーブ車のブランド' 、
名： 'サーブ' 、
ヴァル：「さぶカード車の、
SRC：必要（」。 /assets/lesson2/5.jpg ' ）
のisActive：falseに、
}、
{
タイトル： 'ランボルギーニランボルギーニ'
名称： 'ランボルギーニ'
ヴァル： 'ランボルギーニ'
：srcは（必要 ./assets/lesson2/6'。 JPG " ）、
のisActive：falseに、
}、
{
タイトル： 'ポルシェポルシェ' 、
名称： 'ポルシェ' 、
ヴァル： 'ポルシェ' 、
SRC：（必要 './assets/lesson2/7.jpg' ）
のisActive：falseに、
} 、
{
タイトル： 'プジョープジョー' 、
名前： 'プジョー' 、
ヴァル： '美しい' 、
SRC：必要（ './assets/lesson2/8.jpg' ）、
のisActive：偽、
}、
{
タイトル：
] 'Mercedes1メルセデスベンツ' 、
名称： 'Mercedes1' 、
ヴァル： 'メルセデスベンツ' 、
SRC：必要（ './assets/lesson2/9.jpg' ）
のisActive：falseに、
}、
{
タイトル： 'ビュイックビュイック' 、
名称： 'ビュイック' 、
ヴァル： 'ビュイック' 、
SRC：必要（ './assets/lesson2/10.jpg' ）
のisActive：falseに、
}
}
}、
メソッド：{
handleAover（インデックス）{
この .lists [インデックス] .isActive = 真。
}、
handleAout（インデックス）{
これは [インデックス] .isActive = .lists 偽を、
}
}
}
</ SCRIPT>