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>無標(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值傳過去
 }else{
 vm.myhash = '#all'; //否則用默認(rèn)值
 }
}
watchHashChange();
window.addEventListener('hashchange',watchHashChange);
</script>
</body>
</html>

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

您可能感興趣的文章:

相關(guān)文章

Vue在echarts?tooltip中添加點(diǎn)擊事件案例詳解
本文主要介紹了Vue項(xiàng)目中在echarts?tooltip添加點(diǎn)擊事件的案例詳解，代碼具有一定的價(jià)值，感興趣的小伙伴可以來學(xué)習(xí)一下
2021-11-11
VUE實(shí)現(xiàn)大轉(zhuǎn)盤抽獎(jiǎng)
營運(yùn)三寶(九宮格、大轉(zhuǎn)盤、老虎機(jī)，當(dāng)然此三寶當(dāng)然是最基礎(chǔ)的營銷運(yùn)營手段)，本片文章聊聊大轉(zhuǎn)盤，轉(zhuǎn)盤的實(shí)現(xiàn)邏輯應(yīng)該是營銷方案較為簡(jiǎn)單的一種了，本文將介紹如何實(shí)現(xiàn)大轉(zhuǎn)盤抽獎(jiǎng)，感興趣的朋友可以參考下
2021-05-05
使用Vant如何完成各種Toast提示框
這篇文章主要介紹了使用Vant如何完成各種Toast提示框，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
vue mvvm數(shù)據(jù)響應(yīng)實(shí)現(xiàn)
這篇文章主要介紹了vue mvvm數(shù)據(jù)響應(yīng)實(shí)現(xiàn)的方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2020-11-11
vue+el-table實(shí)現(xiàn)合并單元格
這篇文章主要為大家詳細(xì)介紹了vue+el-table實(shí)現(xiàn)合并單元格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
vue2使用wangeditor實(shí)現(xiàn)手寫輸入功能
這篇文章主要為大家詳細(xì)介紹了vue2如何使用wangeditor實(shí)現(xiàn)手寫輸入功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以了解下
2023-12-12
淺談Vuex@2.3.0 中的 state 支持函數(shù)申明
這篇文章主要介紹了淺談Vuex@2.3.0 中的 state 支持函數(shù)申明，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-11-11
vue uniapp實(shí)現(xiàn)分段器效果
這篇文章主要為大家詳細(xì)介紹了vue uniapp實(shí)現(xiàn)分段器效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
關(guān)于vue的npm run dev和npm run build的區(qū)別介紹
這篇文章主要介紹了關(guān)于vue的npm run dev和npm run build的區(qū)別介紹，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-01-01
解讀Vue組件注冊(cè)方式
無論是Vue還是React，都有組件的概念。組件，就是能和別人組合在一起的物件。在前端頁面開發(fā)過程中，將一個(gè)頁面劃分成一個(gè)個(gè)小的模塊，每個(gè)模塊單獨(dú)定義，每個(gè)模塊就是一個(gè)組件。組件可以進(jìn)行復(fù)用，A頁面和B頁面有一個(gè)相似的模塊，可以抽離成一個(gè)可局部修改的組件。
2021-05-05