這篇文章主要為大家詳細介紹了vue專案nav導覽列的實現方法，具有一定的參考價值，有興趣的小夥伴們可以參考一下
每個網頁專案都少不了導覽欄，透過原始的方法基本上都是可以寫出來的。但是要寫出程式碼量少，冗餘度低的程式碼就要動腦子思考一下了。
最近寫了一個百度地圖的項目，要求底部有一個導航列。具體如下圖：
首先，拿到了底部導覽列的所有圖示圖片，圖片都有兩種。灰色的代表未選中，選中的用帶樣色的圖片替換。
先看一下，元件中 html結構：透過vue提供的v-for方法，進行遍歷顯示footNav這個陣列。陣列裡邊存放著{title:"銀行"，url:" "，url1:" "}，將圖片的src與isSelect進行綁定，並進行判斷，如果等於當前的title時即為選中當前的導航，顯示選取時的圖片url1。
<p class="footer">
<ul>
<li v-for="item in footNav" @click="selectMapNav(item.title)">
<img :src="isSelect === item.title ? item.url1 : item.url" alt="">
<p>{{item.title}}</p>
</li>
</ul>
</p>樣式用的是擴展語言less寫的，應該都能看懂，只是簡單的嵌套了一下。給這個地步加一個寬為100%，固定的高度。因為要固定在底部顯示，所以加了一個固定定位和背景顏色。寫的是手機端項目，瀏覽器都比較新，所以不用考慮相容問題。大膽的flex佈局可以很方便的實作導覽列。
.footer ul{
width:100%;
height:50px;
position:fixed;
bottom:0;
z-index:1;
background-color:#fff;
display:flex;
li{
text-align:center;
flex:1;
img{height:23px;width:23px;margin-top:5px;}
p{font-size:0.1rem;height:15px;line-height:10px;}
}
}在vue data () 中定義一個數組，裡邊存放每一個導航的標題，如‘銀行'，未選中時顯示的圖片url，選中時的圖片url1。 isSelect表示目前選取的，預設選取銀行。
isSelect: '银行',
footNav: [{title: '银行', url: '../../../static/baiduMap/23@2x.png', url1: '../../../static/baiduMap/22@2x.png'},
{title: '公交 ', url: '../../../static/baiduMap/11@2x.png', url1: '../../../static/baiduMap/10@2x.png'},
{title: '地铁 ', url: '../../../static/baiduMap/13@2x.png', url1: '../../../static/baiduMap/12@2x.png'},
{title: '教育 ', url: '../../../static/baiduMap/15@2x.png', url1: '../../../static/baiduMap/14@2x.png'},
{title: '医院 ', url: '../../../static/baiduMap/17@2x.png', url1: '../../../static/baiduMap/16@2x.png'},
{title: '休闲 ', url: '../../../static/baiduMap/19@2x.png', url1: '../../../static/baiduMap/18@2x.png'},
{title: '购物 ', url: '../../../static/baiduMap/21@2x.png', url1: '../../../static/baiduMap/20@2x.png'}
]在methods方法中，寫上html中呼叫的事件。透過html結構層那裡的點擊事件selectMapNav(item.title)傳過來的title賦值給isSelect即可實現導覽列的點擊狀態的變化。
selectMapNav (title) {
this.isSelect = title }來看一下最終的結果，很完美。
上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
#以上是使用vue如何實作nav導覽欄的詳細內容。更多資訊請關注PHP中文網其他相關文章！
