Vue實現(xiàn)根據(jù)hash高亮選項卡
更新時間：2019年05月27日 16:03:23 作者：FrankFang7
這篇文章主要為大家詳細介紹了Vue實現(xiàn)根據(jù)hash高亮選項卡，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Vue實現(xiàn)根據(jù)hash高亮選項卡的具體代碼，供大家參考，具體內容如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
a {
color: #555;
}
.active {
color: red;
}
</style>
</head>
<body>
<main id="box">
<div class="tab">
<a v-for="tab in tabs" :href="tab.href" :class="{active:tab.href==myhash}">{{tab.title}}</a>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var vm=new Vue({
el:'#box',
data:{
tabs: [
{
title: '所有任務',
href: '#all'
},
{
title: '未完成任務',
href: '#unfinished'
},
{
title: '完成的任務',
href: '#finished'
}
],
myhash:'#all' //存儲當前hash值
}
});
function watchHashChange(){
var hash = window.location.hash;
if(hash!=''){
vm.myhash = hash; //將hash值傳過去
}else{
vm.myhash = '#all'; //否則用默認值
}
}
watchHashChange();
window.addEventListener('hashchange',watchHashChange);
</script>
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue如何添加數(shù)組頁面及時顯示，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
bpmn.js是一個BPMN2.0渲染工具包和web建模器,使得畫流程圖的功能在前端來完成,這篇文章主要給大家介紹了關于vue3集成bpmn.js的相關資料,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2024-01-01
本文主要介紹了詳解Vue項目的打包方式(生成dist文件)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
axios封裝，使用攔截器統(tǒng)一處理接口，超詳細的教程（推薦）
這篇文章主要介紹了axios封裝使用攔截器處理接口，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
Vue中點擊active并第一個默認選中功能的實現(xiàn)
這篇文章主要介紹了Vue中點擊active并第一個默認選中功能的實現(xiàn)代碼，代碼簡單易懂，非常不錯具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了Vue中的slots/scoped slots,本文實例代碼相結合的形式給大家介紹了slots的工作原理，需要的朋友可以參考下2018-04-04
這篇文章主要為大家詳細介紹了Vue組件簡易模擬實現(xiàn)購物車，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
Vue 頁面切換效果之 BubbleTransition(推薦)
使用 vue，vue-router，animejs 來講解如何實現(xiàn)vue頁面切換效果之 BubbleTransition，需要的朋友參考下吧2018-04-04
在本篇文章中我們給大家總結了關于編寫vue組件的方法知識點，有此需要的讀者們跟著學習下。2019-02-02
本文主要介紹了vue清空數(shù)組的幾個方式，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12