vue頭部導(dǎo)航動(dòng)態(tài)點(diǎn)擊處理方法
1：DATA中兩個(gè)變量，
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)動(dòng)態(tài)頭部
h5項(xiàng)目中，經(jīng)常用到的頭部是樣式是一致的，只是左右按鈕和中間標(biāo)題會(huì)不一致。
vue主打組件化，為了減少代碼冗余，可以將頭部提取成一個(gè)單獨(dú)的組件。接下來考慮是否需要左右按鈕，是否固定在頁面上不動(dòng)，中間標(biāo)題是否為動(dòng)態(tài)。
先寫一個(gè)簡單的頭部，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)航動(dòng)態(tài)點(diǎn)擊處理方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹vue.js Router嵌套路由,平時(shí)訪問首頁,里面有新聞?lì)惖?home/news,還有信息類的/home/message這時(shí)候就需要使用到嵌套路由,下面我們就來具體學(xué)習(xí)嵌套路由的原理,需要的朋友可以參考一下2021-10-10
vue+element_ui上傳文件,并傳遞額外參數(shù)操作
這篇文章主要介紹了vue+element_ui上傳文件,并傳遞額外參數(shù)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-12-12
vue-quill-editor插入圖片路徑太長問題解決方法
這篇文章主要介紹了vue-quill-editor插入圖片路徑太長問題解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(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)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
詳解vue中的父子傳值雙向綁定及數(shù)據(jù)更新問題
這篇文章主要介紹了vue中的父子傳值雙向綁定及數(shù)據(jù)更新問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-06-06
這篇文章主要為大家詳細(xì)介紹了Vue.js事件處理器與表單控件綁定詳解的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
vue-simple-verify實(shí)現(xiàn)滑動(dòng)驗(yàn)證碼功能
登錄頁面經(jīng)常會(huì)需要滑動(dòng)驗(yàn)證碼的情況,使用vue插件vue-simple-verify就可以輕松實(shí)現(xiàn),下面小編給大家分享vue-simple-verify實(shí)現(xiàn)滑動(dòng)驗(yàn)證碼功能,感興趣的朋友一起看看吧2024-06-06
Vue3中watchEffect和watch的基礎(chǔ)應(yīng)用詳解
watch是一個(gè)偵聽器，默認(rèn)是懶偵聽的，即僅在偵聽源發(fā)生變化時(shí)才執(zhí)行回調(diào)函數(shù)，watchEffect是會(huì)自動(dòng)收集函數(shù)里面變量的響應(yīng)式依賴，本文主要來講講二者的區(qū)別，感興趣的可以了解一下2023-07-07
Mock.js在Vue項(xiàng)目中的使用小結(jié)
這篇文章主要介紹了Mock.js在Vue項(xiàng)目中的使用,在vue.config.js中配置devServer，在before屬性中引入接口路由函數(shù)，詳細(xì)步驟跟隨小編通過本文學(xué)習(xí)吧2022-07-07