詳解Vue底部導(dǎo)航欄組件
更新時間：2019年05月02日 10:18:05 作者：孤獨浪人1
這篇文章主要介紹了Vue底部導(dǎo)航欄的詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
不多說直接上代碼 BottomNav.vue：
<template>
<div class="footer">
<div v-for='(item,index) of items' :class='[item.cls,{on:index === idx}]' @click="$router.push(item.push)">
<img :src="index===idx?item.iconSelect:item.icon">
<p :class="['colorChange',{on:index===idx}]" >{{item.name}}</p>
</div>
</div>
</template>
<script type="text/javascript">
export default{
props:['idx'],
data(){
return {
items:[{
cls:"home",
name:"首頁",
push:"/home",
icon:"../static/home.png",
iconSelect:"../static/home_select.png"
},
{
cls:"shares",
name:"股票",
push:"/shares",
icon:"../static/home.png",
iconSelect:"../static/home_select.png"
},
{
cla:"community",
name:"社區(qū)",
push:"/community",
icon:"../static/home.png",
iconSelect:"../static/home_select.png"
},
{
cla:"mine",
name:"我的",
push:"/mine",
icon:"../static/home.png",
iconSelect:"../static/home_select.png"
}]
}
}
}
</script>
:src="index===idx?item.iconSelect:item.icon" 通過代碼判斷是否是當前頁面，選擇不通的圖片
@click="$router.push(item.push) 跳轉(zhuǎn)到各個頁面
Style:
.footer{
display: flex;
position: absolute;
left: 0;
bottom: 0;
box-sizing: border-box;
height: 6rem;
background: #909090;
width: 100%;}
div{
flex: 1;
font-size: 30px;
}
div img{
width: 30px;
height: 30px;
}
div p{
color:black;
}
.on{
color: red;
}
使用方式：
導(dǎo)入：
<BNai :idx="0"> </BNai>
以上所述是小編給大家介紹的Vue底部導(dǎo)航欄詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了Vue子組件監(jiān)聽父組件值的變化方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
在vue開發(fā)中，會涉及到很多接口的處理，當項目足夠大時，就需要定義規(guī)范統(tǒng)一的接口，本文就來介紹一下vue 項目接口管理，具有一定的參考價值，感興趣的小伙伴可以一起來了解一下2019-01-01
Vue?中如何使用?el-date-picker?限制只能選擇當天、當天之前或當天之后日期的方法詳解
在Vue前端開發(fā)中，使用 el-date-picker 組件進行日期選擇是常見的需求，有時候我們需要限制用戶只能選擇當天、當天之前或當天之后的日期，本文將詳細介紹如何使用 el-date-picker 組件實現(xiàn)這些限制，讓你能夠輕松應(yīng)對各種日期選擇場景,需要的朋友可以參考下2023-09-09
解決npm安裝錯誤:No matching version found for&
這篇文章主要介紹了解決npm安裝錯誤:No matching version found for XXX@3.3.6問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
vue.js學(xué)習(xí)之UI組件開發(fā)教程
前端開發(fā)中,隨著業(yè)務(wù)的增多,出于效率的考慮,我們對于組件化開發(fā)的需求也越來越迫切。下面這篇文章主要給大家介紹了關(guān)于vue.js之UI組件開發(fā)的相關(guān)資料，文中介紹的非常詳細，需要的朋友們下面來一起看看吧。2017-07-07
這篇文章主要介紹了element-ui封裝一個Table模板組件的示例，幫助大家更好的理解和學(xué)習(xí)vue框架的使用，感興趣的朋友可以了解下2021-01-01
Vue代理請求數(shù)據(jù)出現(xiàn)404問題及解決
這篇文章主要介紹了Vue代理請求數(shù)據(jù)出現(xiàn)404的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
表格數(shù)據(jù)是websocket通信獲取的數(shù)據(jù),首次獲取20條數(shù)據(jù),以后新增訂閱獲取一條,新增一條則向上滑動顯示最新數(shù)據(jù),本文給大家介紹Element-plus使用中遇到的問題小結(jié),感興趣的朋友跟隨小編一起看看吧2024-04-04
這篇文章主要介紹了深度剖析Vue3在瀏覽器的運行原理，文章通過圍繞主題展開相關(guān)詳細介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
Vue中引入bootstrap.min.css的正確姿勢分享
這篇文章主要介紹了Vue中引入bootstrap.min.css的正確姿勢,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10