Vue练习十二：02_06_鼠标移入移出改变图片透明度

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>