快捷導(dǎo)航

Vue實(shí)現(xiàn)導(dǎo)航欄點(diǎn)擊當(dāng)前標(biāo)簽變色功能

更新時(shí)間：2020年08月19日 08:39:05 作者：小羽向前跑

這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)導(dǎo)航欄點(diǎn)擊當(dāng)前標(biāo)簽變色功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Vue實(shí)現(xiàn)導(dǎo)航欄點(diǎn)擊當(dāng)前標(biāo)簽變色功能的具體代碼，供大家參考，具體內(nèi)容如下

1.效果

2.所有代碼

<template>
 <div class="now-time">
 <div class="timebox">
 <a href="#" v-for="(item,index) in nowTime" v-on:click="addClass(index)"
 v-bind:class="{ bgColors:index==current}">
 <p>{{item.time}}</p>
 <p>{{item.start}}</p>
 </a>
 </div>
 </div>
 
 
</template>
 
<script>
 export default {
 name: "Nowtime",
 methods: {
 addClass:function(index){
 this.current=index;
 }
 },
 mounted() {
 
 },
 data(){
 return{
 current:0,
 nowTime:[
 {
 time:"9:00",
 start:"已開(kāi)搶"
 },
 {
 time:"10:00",
 start:"已開(kāi)搶"
 },
 {
 time:"11:00",
 start:"已開(kāi)搶"
 },
 {
 time:"12:00",
 start:"已開(kāi)搶"
 },
 {
 time:"13:00",
 start:"未開(kāi)搶"
 },
 {
 time:"14:00",
 start:"未開(kāi)搶"
 },
 {
 time:"15:00",
 start:"未開(kāi)搶"
 },
 ],
 }
 }
 }
</script>
 
<style scoped>
.now-time{
 width: 100%;
 height: .8rem;
 background: #282832;
 display: flex;
 overflow-x:scroll;
}
.timebox{
 width: 100%;
 height: .8rem;
 display: flex;
 background: #282832;
}
 .now-time a{
 display: flex;
 flex-direction: column;
 width: 1.35rem;
 height: .79rem;
 align-items: center;
 flex-shrink: 0;
 }
.now-time a p:first-child{
 font-size: .23rem;
 color: white;
 font-weight: bold;
}
.now-time a p:last-child{
 font-size: .16rem;
 color: white;
}
.timebox .bgColors{
 background: #ff5700;
}
</style>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue.js快速入門(mén)教程
Vue.js是一個(gè)專注于視圖模型(ViewModal)的框架。接下來(lái)給大家?guī)?lái)了vue.js快速入門(mén)教程，非常不錯(cuò)，具有參考借鑒價(jià)值，一起看看吧
2016-09-09
淺談Vue SSR 的 Cookies 問(wèn)題
本篇文章主要介紹了淺談Vue SSR 的 Cookies 問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-11-11
vue多環(huán)境配置之 .env配置文件詳解
.env文件是vue運(yùn)行項(xiàng)目時(shí)的環(huán)境配置文件，這篇文章主要介紹了vue多環(huán)境配置之 .env配置文件,需要的朋友可以參考下
2023-03-03
Vue2.0 v-for filter列表過(guò)濾功能的實(shí)現(xiàn)
今天小編就為大家分享一篇Vue2.0 v-for filter列表過(guò)濾功能的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
vue3引入highlight.js進(jìn)行代碼高亮的方法實(shí)例
最近忙著開(kāi)發(fā)自己的開(kāi)發(fā)腳手架,在做代碼生成器的時(shí)候,有個(gè)預(yù)覽功能,需要讓代碼高亮,下面這篇文章主要給大家介紹了關(guān)于vue3引入highlight.js進(jìn)行代碼高亮的相關(guān)資料,需要的朋友可以參考下
2022-04-04
vue實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)及滾動(dòng)監(jiān)聽(tīng)的方法
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)及滾動(dòng)監(jiān)聽(tīng)的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
快速解決Vue項(xiàng)目在IE瀏覽器中顯示空白的問(wèn)題
今天小編就為大家分享一篇快速解決Vue項(xiàng)目在IE瀏覽器中顯示空白的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
vue實(shí)現(xiàn)按鈕文字動(dòng)態(tài)改變
這篇文章主要介紹了vue實(shí)現(xiàn)按鈕文字動(dòng)態(tài)改變方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-11-11
Vue3中嵌套路由和編程式路由的實(shí)現(xiàn)
Vue?Router在Vue.js的核心庫(kù)上提供了路由的功能,使得我們可以在單頁(yè)應(yīng)用中實(shí)現(xiàn)頁(yè)面的切換、跳轉(zhuǎn)和參數(shù)傳遞等功能,本文主要介紹了Vue3中嵌套路由和編程式路由的實(shí)現(xiàn),感興趣的可以了解一下
2023-12-12
初識(shí)簡(jiǎn)單卻不失優(yōu)雅的Vue.js
這篇文章主要為大家介紹了簡(jiǎn)單卻不失優(yōu)雅、小巧而不乏大匠的Vue.js,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09