vue的hash值原理也是table切換實例代碼
我希望大家敲一遍
<!DOCTYPE html><html><head><meta charset='utf-8'><title></title><style>.pages>div{display: none;}</style></head><body><p><a href='http://m.cgvv.com.cn/bcjs/10507.html#/' rel='external nofollow' >aaa</a><a href='http://m.cgvv.com.cn/bcjs/10507.html#/about' rel='external nofollow' >bbb</a><a href='http://m.cgvv.com.cn/bcjs/10507.html#/user' rel='external nofollow' >cccc</a></p><div class='pages'><div id='home'>首頁</div><div id='about'>關于我的頁面</div><div class='user'>用戶中心</div></div></body><script type='text/javascript'>//hash 和頁面一一對應起來//router 配置var router = [{path:'/',component:document.getElementById('home')},{path:'/about',component:document.getElementById('about')},{path:'/user',component:document.querySelector('.user')},]// 默認hashwindow.location.hash = '#/';// 默認頁面var currentView = router[0].component;currentView.style.display='block';window.onhashchange=()=>{//通過判斷hash切換div頁面console.log(location.hash);//獲取hash值,不要井號var hash = location.hash.slice(1);router.forEach(item=>{if(item.path==hash){//先隱藏之前顯示的頁面currentView.style.display = 'none';// 顯示對應的組件item.component.style.display = 'block';//重新設置當前顯示的頁面是哪個divcurrentView = item.component;}})}</script></html>
到此這篇關于vue的hash值原理也是table切換的文章就介紹到這了,更多相關vue hash原理內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！
相關文章：
1. python如何換行輸出2. Python使用urlretrieve實現直接遠程下載圖片的示例代碼3. Python：UserWarning：此模式具有匹配組。要實際獲得組，請使用str.extract4. Android Studio中一套代碼多渠道打包的實現方法5. Java 接口和抽象類的區別詳解6. python如何計算圓的面積7. Java使用Tesseract-Ocr識別數字8. Android打包篇:Android Studio將代碼打包成jar包教程9. 詳解java google Thumbnails 圖片處理10. 解決Android Studio 格式化 Format代碼快捷鍵問題
網公網安備