闲话不提，直接上侧面导航栏代码
<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>标签的路径
与函数内的值绑定
<img :src="img" >
//在data()下
//事先定义要切换图片的路径
imgList:[
{
src:require('../assets/img1.jpg')
},
{
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"});
},
