Demo 在线地址：
https://sx00xs.github.io/test/12/index.html
---------------------------------------------------------------
ide: vscode
文件格式：.vue
解析：（待补）
<template>
<div id=app>
<ul class=imgList >
<li v-for="(list, index) in lists" :key="index"
:class="{current:list.isActive}"
@mouseover=handleOver(index)
@mouseout=handleOut(index)
>
<img :src=list.src >
</li>
</ul>
</div>
</template>
<script>
export default {
data:function(){
return{
lists:[
{
src:require('./assets/lesson2/1.jpg'),
isActive:false
},
{
src:require('./assets/lesson2/2.jpg'),
isActive:false
},
{
src:require('./assets/lesson2/3.jpg'),
isActive:false
},
{
src:require('./assets/lesson2/4.jpg'),
isActive:false
},
{
src:require('./assets/lesson2/5.jpg'),
isActive:false
},
{
src:require('./assets/lesson2/6.jpg'),
isActive:false
},
{
src:require('./assets/lesson2/7.jpg'),
isActive:false
},
{
src:require('./assets/lesson2/8.jpg'),
isActive:false
},
{
src:require('./assets/lesson2/9.jpg'),
isActive:false
},
{
src:require('./assets/lesson2/10.jpg'),
isActive:false
},
]
}
},
methods:{
handleOver(index){
//for(var i=0;i<this.lists.length;i++) this.lists[i].isActive=false;
this.lists[index].isActive=true;
},
handleOut(index){
this.lists[index].isActive=false;
}
}
}
</script>