詳解Vue底部導(dǎo)航欄組件
更新時(shí)間：2019年05月02日 10:18:05 作者：孤獨(dú)浪人1
這篇文章主要介紹了Vue底部導(dǎo)航欄的詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(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:"首頁(yè)",
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" 通過代碼判斷是否是當(dāng)前頁(yè)面，選擇不通的圖片
@click="$router.push(item.push) 跳轉(zhuǎn)到各個(gè)頁(yè)面
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)航欄詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了Vue子組件監(jiān)聽父組件值的變化方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue 項(xiàng)目接口管理的實(shí)現(xiàn)
在vue開發(fā)中，會(huì)涉及到很多接口的處理，當(dāng)項(xiàng)目足夠大時(shí)，就需要定義規(guī)范統(tǒng)一的接口，本文就來(lái)介紹一下vue 項(xiàng)目接口管理，具有一定的參考價(jià)值，感興趣的小伙伴可以一起來(lái)了解一下2019-01-01
Vue?中如何使用?el-date-picker?限制只能選擇當(dāng)天、當(dāng)天之前或當(dāng)天之后日期的方法詳解
在Vue前端開發(fā)中，使用 el-date-picker 組件進(jìn)行日期選擇是常見的需求，有時(shí)候我們需要限制用戶只能選擇當(dāng)天、當(dāng)天之前或當(dāng)天之后的日期，本文將詳細(xì)介紹如何使用 el-date-picker 組件實(shí)現(xiàn)這些限制，讓你能夠輕松應(yīng)對(duì)各種日期選擇場(chǎng)景,需要的朋友可以參考下2023-09-09
解決npm安裝錯(cuò)誤:No matching version found for&
這篇文章主要介紹了解決npm安裝錯(cuò)誤:No matching version found for XXX@3.3.6問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue.js學(xué)習(xí)之UI組件開發(fā)教程
前端開發(fā)中,隨著業(yè)務(wù)的增多,出于效率的考慮,我們對(duì)于組件化開發(fā)的需求也越來(lái)越迫切。下面這篇文章主要給大家介紹了關(guān)于vue.js之UI組件開發(fā)的相關(guān)資料，文中介紹的非常詳細(xì)，需要的朋友們下面來(lái)一起看看吧。2017-07-07
element-ui封裝一個(gè)Table模板組件的示例
這篇文章主要介紹了element-ui封裝一個(gè)Table模板組件的示例，幫助大家更好的理解和學(xué)習(xí)vue框架的使用，感興趣的朋友可以了解下2021-01-01
Vue代理請(qǐng)求數(shù)據(jù)出現(xiàn)404問題及解決
這篇文章主要介紹了Vue代理請(qǐng)求數(shù)據(jù)出現(xiàn)404的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
表格數(shù)據(jù)是websocket通信獲取的數(shù)據(jù),首次獲取20條數(shù)據(jù),以后新增訂閱獲取一條,新增一條則向上滑動(dòng)顯示最新數(shù)據(jù),本文給大家介紹Element-plus使用中遇到的問題小結(jié),感興趣的朋友跟隨小編一起看看吧2024-04-04
這篇文章主要介紹了深度剖析Vue3在瀏覽器的運(yùn)行原理，文章通過圍繞主題展開相關(guān)詳細(xì)介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
Vue中引入bootstrap.min.css的正確姿勢(shì)分享
這篇文章主要介紹了Vue中引入bootstrap.min.css的正確姿勢(shì),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10