閑話不提朴恳，直接上側(cè)面導(dǎo)航欄代碼
<ul>
<li v-for="(item,index) in MenuItem" :key="index" @click="JumpTo(item.location)">
<img :src=(item.img) />{{item.text}}
</li>
</ul>
以及MenuItem構(gòu)成
data(){
return{
MenuItem:[
{text:'首頁',img:require('../assets/home.png'),location:'homepage'},
{text:'關(guān)于我',img:require('../assets/user.png'),location:'about'},
],
}
}
為什么沒有用到key也要綁定一個(gè)？我的理解是給循環(huán)的每個(gè)item加一個(gè)‘唯一標(biāo)記’毫痕，這樣使得vue在數(shù)據(jù)更新后渲染列表新加項(xiàng)的時(shí)候 不必重新全部渲染征峦，而是找出與上次渲染時(shí)發(fā)生變化的key項(xiàng)進(jìn)行渲染。
這里貌似講的更詳細(xì)消请，奈何沒太看懂栏笆。 總之記住v-for循環(huán)出的內(nèi)容要保證唯一性就對(duì)了
再說一下MenuItem中的img項(xiàng)，此處記住Vue中對(duì)img進(jìn)行綁定路徑操作時(shí)臊泰，要用require包裹路徑
img:src('....')//不能正確獲取路徑
img:src=require('....')//可以正確獲取路徑
循環(huán)切換圖片蛉加，本來是打算用swiper，但是很顯然 犯懶了（下次一定不懶）缸逃。 于是用setInterval()函數(shù)寫了一個(gè)循環(huán)七婴，每過一個(gè)固定時(shí)間就重新給img路徑重新賦值，以達(dá)到循環(huán)切換圖片的效果:
//將要循環(huán)的<img>標(biāo)簽的路徑
與函數(shù)內(nèi)的值綁定
<img :src="img" >
//在data()下
//事先定義要切換圖片的路徑
imgList:[
{
src:require('../assets/img1.jpg')
},
{
src:require('../assets/img2.jpg')
},
{
src:require('../assets/img3.jpg')
}
],
img:' ', //用于綁定路徑
id:0 //用于判定列表循環(huán)
//在methods內(nèi)創(chuàng)建循環(huán)函數(shù)
imgLoop(){
this.img=this.imgList[this.id].src
setInterval(()=>{
//如果id與數(shù)組長(zhǎng)度-1(最后一個(gè)元素的位置）相等察滑，說明已經(jīng)循環(huán)到最后一個(gè)元素
if(this.id===this.imgList.length-1){
//重置id計(jì)數(shù)
this.id=0
//將數(shù)組內(nèi)第一位的內(nèi)容重新賦予img
this.img=this.imgList[0].src
}
else{
//繼續(xù)到數(shù)組內(nèi)下一項(xiàng)
this.id+=1;
//將當(dāng)前項(xiàng)的值賦予img
this.img=this.imgList[this.id].src
}
},8000 //8000ms)
}
//oncreate()時(shí) 調(diào)用此函數(shù)
created(){
this.imgLoop()
},
最后說下<li>里的@click綁定的是錨點(diǎn)跳轉(zhuǎn)打厘，此處使用了Element.scrollIntoView() 方法，把要跳轉(zhuǎn)位置的id與location綁定即可:
//渲染好的網(wǎng)頁內(nèi)容
<div id="homepage" class="layout-header">//id和上方綁定的location值一致
//method()內(nèi)容
JumpTo:function(location){
var whereTo=document.getElementById(location);
whereTo.scrollIntoView({behavior: "smooth"});
},
