Vue本地项目过程随笔(3):v-for绑定图片路径，图片循环切换

闲话不提，直接上侧面导航栏代码

 <ul>
                <li v-for="(item,index) in MenuItem" :key="index" @click="JumpTo(item.location)">
                    <img :src=(item.img) />{{item.text}}
                </li>
</ul>

以及MenuItem构成

data(){
  return{
     MenuItem:[
                {text:'首页',img:require('../assets/home.png'),location:'homepage'},
                {text:'关于我',img:require('../assets/user.png'),location:'about'},
            ],
  }
}

为什么没有用到key也要绑定一个？我的理解是给循环的每个item加一个‘唯一标记’，这样使得vue在数据更新后渲染列表新加项的时候 不必重新全部渲染，而是找出与上次渲染时发生变化的key项进行渲染。
这里貌似讲的更详细，奈何没太看懂。 总之记住v-for循环出的内容要保证唯一性就对了

再说一下MenuItem中的img项，此处记住Vue中对img进行绑定路径操作时，要用require包裹路径

img:src('....')//不能正确获取路径
img:src=require('....')//可以正确获取路径

循环切换图片，本来是打算用swiper，但是很显然 犯懒了（下次一定不懒）。 于是用setInterval()函数写了一个循环，每过一个固定时间就重新给img路径重新赋值，以达到循环切换图片的效果:

//将要循环的<img>标签的路径![giphy.gif](https://upload-images.jianshu.io/upload_images/23625846-14acdcfac75cd102.gif?imageMogr2/auto-orient/strip)
与函数内的值绑定
 <img :src="img" >
//在data()下
//事先定义要切换图片的路径
imgList:[
                {
                    src:require('../assets/img1.jpg')
                },![giphy.gif](https://upload-images.jianshu.io/upload_images/23625846-3464cc9c75c252ee.gif?imageMogr2/auto-orient/strip)

                {
                    src:require('../assets/img2.jpg')
                },
                {
                    src:require('../assets/img3.jpg')
                }
            ],
            img:' ', //用于绑定路径
            id:0 //用于判定列表循环


//在methods内创建循环函数
  imgLoop(){
            this.img=this.imgList[this.id].src
            setInterval(()=>{
                //如果id与数组长度-1(最后一个元素的位置）相等，说明已经循环到最后一个元素
                if(this.id===this.imgList.length-1){
                  //重置id计数
                    this.id=0
                 //将数组内第一位的内容重新赋予img
                    this.img=this.imgList[0].src
                }
                else{
                //继续到数组内下一项
                    this.id+=1;
              //将当前项的值赋予img
                    this.img=this.imgList[this.id].src
                }
           },8000 //8000ms)
        }

//oncreate()时 调用此函数
 created(){
        this.imgLoop()
    },

最后说下<li>里的@click绑定的是锚点跳转，此处使用了Element.scrollIntoView() 方法，把要跳转位置的id与location绑定即可:

//渲染好的网页内容
<div id="homepage" class="layout-header">//id和上方绑定的location值一致
//method()内容
 JumpTo:function(location){
            var whereTo=document.getElementById(location);
            whereTo.scrollIntoView({behavior: "smooth"});
        },