vue頭部導(dǎo)航動態(tài)點(diǎn)擊處理方法
更新時間：2018年11月02日 11:21:12 作者：qq_22936647
這篇文章主要介紹了vue頭部導(dǎo)航動態(tài)點(diǎn)擊處理方法,文中通過一段示例代碼給大家介紹了vue實(shí)現(xiàn)動態(tài)頭部的方法，需要的朋友可以參考下
1：DATA中兩個變量，
data: {
nav:['頭條1','頭條2'],
ins:0,//記錄當(dāng)前點(diǎn)擊的INDEX
},
2：
<div v-for="(item,index) in nav" :class="index == ins ? 'swiper-slide swiper_active' : 'swiper-slide' " @click="topClick(index)">{{item}}</div>
3：mothods:
topClick:function(i){
var t=this;
t.ins=i;
},
ps：下面看下vue實(shí)現(xiàn)動態(tài)頭部
h5項目中，經(jīng)常用到的頭部是樣式是一致的，只是左右按鈕和中間標(biāo)題會不一致。
vue主打組件化，為了減少代碼冗余，可以將頭部提取成一個單獨(dú)的組件。接下來考慮是否需要左右按鈕，是否固定在頁面上不動，中間標(biāo)題是否為動態(tài)。
先寫一個簡單的頭部，position設(shè)置成變量customFixed。左右按鈕通過<slot>來控制。中間標(biāo)題設(shè)置成變量customTitle通過父子組件傳值過來。
設(shè)置好樣式以后給customFixed和customTitle默認(rèn)值和類型。
<template>
<div id="header" :style="{'position' : customFixed ? 'fixed' : 'absolute'}">
<slot name="left"></slot>
{{customTitle}}
<slot name="right"></slot>
</div>
</template>
<script>
export default {
name: "my-header",
props:{
customTitle : {
type : String,
default : '標(biāo)題'
},
customFixed: {
type: Boolean,
default: false
}
}
}
</script>
<style scoped>
#header{
width: 100%;height: 40px;background: #666;color: white;text-align: center;line-height: 40px;
position: absolute;left:0;top: 0;z-index: 10;
}
#header button {height: 100%;padding: 0 50px;}
#header button:nth-of-type(1){float: left}
#header button:nth-of-type(2){float: right}
</style>
在用到頭部的地方：
<template>
<div id="app">
<my-header custom-title="通訊錄" custom-fixed>
<button @click="backBtn" slot="left">返回</button>
<button @click="homeBtn" slot="right">主頁</button>
</my-header>
</div>
</template>
總結(jié)
以上所述是小編給大家介紹的vue頭部導(dǎo)航動態(tài)點(diǎn)擊處理方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹vue.js Router嵌套路由,平時訪問首頁,里面有新聞類的/home/news,還有信息類的/home/message這時候就需要使用到嵌套路由,下面我們就來具體學(xué)習(xí)嵌套路由的原理,需要的朋友可以參考一下2021-10-10
vue+element_ui上傳文件,并傳遞額外參數(shù)操作
這篇文章主要介紹了vue+element_ui上傳文件,并傳遞額外參數(shù)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-12-12
vue-quill-editor插入圖片路徑太長問題解決方法
這篇文章主要介紹了vue-quill-editor插入圖片路徑太長問題解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
文章介紹了Vue中的v-model實(shí)現(xiàn)原理,包括數(shù)據(jù)監(jiān)聽和UI通知,通過綁定props.modelValue和使用update:modelValue,子組件可以實(shí)現(xiàn)數(shù)據(jù)變更通知父組件,Vue3提供了defineModel來簡化v-model的定義,并支持自定義v-model變量名,感興趣的朋友一起看看吧2025-01-01
vue router-link 默認(rèn)a標(biāo)簽去除下劃線的實(shí)現(xiàn)
這篇文章主要介紹了vue router-link 默認(rèn)a標(biāo)簽去除下劃線的實(shí)現(xiàn)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
詳解vue中的父子傳值雙向綁定及數(shù)據(jù)更新問題
這篇文章主要介紹了vue中的父子傳值雙向綁定及數(shù)據(jù)更新問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
這篇文章主要為大家詳細(xì)介紹了Vue.js事件處理器與表單控件綁定詳解的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
vue-simple-verify實(shí)現(xiàn)滑動驗證碼功能
登錄頁面經(jīng)常會需要滑動驗證碼的情況,使用vue插件vue-simple-verify就可以輕松實(shí)現(xiàn),下面小編給大家分享vue-simple-verify實(shí)現(xiàn)滑動驗證碼功能,感興趣的朋友一起看看吧2024-06-06
Vue3中watchEffect和watch的基礎(chǔ)應(yīng)用詳解
watch是一個偵聽器，默認(rèn)是懶偵聽的，即僅在偵聽源發(fā)生變化時才執(zhí)行回調(diào)函數(shù)，watchEffect是會自動收集函數(shù)里面變量的響應(yīng)式依賴，本文主要來講講二者的區(qū)別，感興趣的可以了解一下2023-07-07
這篇文章主要介紹了Mock.js在Vue項目中的使用,在vue.config.js中配置devServer，在before屬性中引入接口路由函數(shù)，詳細(xì)步驟跟隨小編通過本文學(xué)習(xí)吧2022-07-07