Vue练习十七：02_11_鼠标移过修改图片路径

Demo 在线地址：
https://sx00xs.github.io/test/17/index.html
---------------------------------------------------------------
ide: vscode
文件格式：.vue
解析：（待补）

<template>
  <div id=app>
    <ul class=box>
      <li class=first><img @load="handleLoad" :src="imgBig"><div :class="{current:isComplete}"></div></li>
      <li v-for="(item,index) in lists" :key="index">
        <a href=#>
          <img :src="item.src" @mouseover="handleOver(index)">
        </a>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data:function(){
    return{
      isComplete:false,
      imgBig:require('./assets/lesson2/big_1.jpg'),
      lists:[
        {src:require('./assets/lesson2/small_1.jpg')},
        {src:require('./assets/lesson2/small_2.jpg')},
        {src:require('./assets/lesson2/small_3.jpg')},
        {src:require('./assets/lesson2/small_4.jpg')},
        {src:require('./assets/lesson2/small_5.jpg')},
        {src:require('./assets/lesson2/small_6.jpg')},
        {src:require('./assets/lesson2/small_7.jpg')},
        {src:require('./assets/lesson2/small_8.jpg')},
        {src:require('./assets/lesson2/small_9.jpg')},
        {src:require('./assets/lesson2/small_10.jpg')},
        {src:require('./assets/lesson2/small_11.jpg')}
      ],
      listsBig:[
        {src:require('./assets/lesson2/big_1.jpg')},
        {src:require('./assets/lesson2/big_2.jpg')},
        {src:require('./assets/lesson2/big_3.jpg')},
        {src:require('./assets/lesson2/big_4.jpg')},
        {src:require('./assets/lesson2/big_5.jpg')},
        {src:require('./assets/lesson2/big_6.jpg')},
        {src:require('./assets/lesson2/big_7.jpg')},
        {src:require('./assets/lesson2/big_8.jpg')},
        {src:require('./assets/lesson2/big_9.jpg')},
        {src:require('./assets/lesson2/big_10.jpg')},
        {src:require('./assets/lesson2/big_11.jpg')}
      ]
    }
  },
  methods:{
    handleOver(index){
      var img=new Image();
      
      img.src=this.imgBig=this.listsBig[index].src;
      
      this.isComplete=true;
      img.complete ? (this.isComplete=false) : this.handleLoad();
    },
    handleLoad(){
      this.isComplete=false;
    }
  }
}
</script>

标签：02,11,Vue,assets,lesson2,src,big,require,jpg
来源： https://www.cnblogs.com/sx00xs/p/11266042.html