gpt4 book ai didi

vue的hash值原理也是table切换实例代码

转载 作者:qq735679552 更新时间:2022-09-27 22:32:09 26 4
gpt4 key购买 nike

CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章vue的hash值原理也是table切换实例代码由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.

我希望大家敲一遍 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html>
     <head>
         <meta charset= "utf-8" >
         <title></title>
         <style>
             .pages>div{display: none;}
         </style>
     </head>
     <body>
         <p>
             <a href= "#/" rel= "external nofollow" >aaa</a>
             <a href= "#/about" rel= "external nofollow" >bbb</a>
             <a href= "#/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" )},
         ]
        
         // 默认hash
         window.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" ;
                     //重新设置当前显示的页面是哪个div
                     currentView = item.component;
                 }
             })
         }
     </script>
</html>

vue的hash值原理也是table切换实例代码
vue的hash值原理也是table切换实例代码
vue的hash值原理也是table切换实例代码

到此这篇关于vue的hash值原理也是table切换的文章就介绍到这了,更多相关vue hash原理内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我! 。

原文链接:https://blog.csdn.net/cj521zhihui/article/details/109784027 。

最后此篇关于vue的hash值原理也是table切换实例代码的文章就讲到这里了,如果你想了解更多关于vue的hash值原理也是table切换实例代码的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com