快捷導(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:"已開搶"
 },
 {
 time:"10:00",
 start:"已開搶"
 },
 {
 time:"11:00",
 start:"已開搶"
 },
 {
 time:"12:00",
 start:"已開搶"
 },
 {
 time:"13:00",
 start:"未開搶"
 },
 {
 time:"14:00",
 start:"未開搶"
 },
 {
 time:"15:00",
 start:"未開搶"
 },
 ],
 }
 }
 }
</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>

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

您可能感興趣的文章:

相關(guān)文章

vue中導(dǎo)出Excel表格的實(shí)現(xiàn)代碼
項(xiàng)目中我們可能會碰到導(dǎo)出Excel文件的需求，這篇文章主要介紹了vue中導(dǎo)出Excel表格的實(shí)現(xiàn)代碼，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2018-10-10
Vue3中Hooks函數(shù)的使用及封裝思想詳解
Vue?3中的Hooks函數(shù)是一種用于在組件中共享可復(fù)用邏輯的方式，簡單來說，就是將單獨(dú)功能的js代碼抽離出來，?加工成公共函數(shù)，從而達(dá)到邏輯復(fù)用，下面小編就來和大家聊聊Hooks函數(shù)的使用及封裝思想吧
2023-06-06
詳解element-ui表格的合并行和列(非常細(xì)節(jié))
最近在需求中遇到了elementUI合并行,索性給大家整理下,這篇文章主要給大家介紹了關(guān)于element-ui表格的合并行和列的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-06-06
vue使用lottie-web實(shí)現(xiàn)web動(dòng)畫效果
在web端,lottie-web庫可以解析導(dǎo)出的動(dòng)畫json文件,并將其以svg或者canvas的方式將動(dòng)畫繪制在我們的頁面上,這篇文章主要介紹了vue使用lottie-web實(shí)現(xiàn)web動(dòng)畫,需要的朋友可以參考下
2024-06-06
vue 自定義icon圖標(biāo)的步驟
這篇文章主要介紹了vue 自定義icon的圖標(biāo)的步驟，文中大概給大家分為兩步驟，通過實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì),需要的朋友可以參考下
2021-08-08
解決vue+elementui項(xiàng)目打包后樣式變化問題
這篇文章主要介紹了解決vue+elementui項(xiàng)目打包后樣式變化問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
vue原理Compile從新建實(shí)例到結(jié)束流程源碼
這篇文章主要為大家介紹了vue原理Compile從新建實(shí)例到結(jié)束流程源碼，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
vue+ESLint 配置保存自動(dòng)格式化代碼
這篇文章主要介紹了vue+ESLint 配置保存自動(dòng)格式化代碼的相關(guān)知識，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-03-03
Vue實(shí)現(xiàn)手機(jī)號、驗(yàn)證碼登錄（60s禁用倒計(jì)時(shí)）
這篇文章主要介紹了Vue實(shí)現(xiàn)手機(jī)號、驗(yàn)證碼登錄（60s禁用倒計(jì)時(shí)），幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2020-12-12
vue+three.js實(shí)現(xiàn)炫酷的3D登陸頁面示例詳解
這篇文章主要為大家介紹了vue+three.js實(shí)現(xiàn)炫酷的3D登陸頁面示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07