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