vue的hash值原理也是table切换实例代码
作者:然陈 发布时间:2023-07-02 16:54:52
标签:vue,hash,原理,table,切换
我希望大家敲一遍
<!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>
来源:https://blog.csdn.net/cj521zhihui/article/details/109784027
0
投稿
猜你喜欢
- python嵌套函数使用外部函数变量的方法,Python2和Python3均可使用python3 def b(): b = 1 def bc
- 对其中的参数进行解释plt.subplots(figsize=(9, 9))设置画面大小,会使得整个画面等比例放大的sns.heapmap(
- 你是否想知道为什么事务日志文件会变得越来越大?事务日志有时候甚至会比你的实际数据库文件还要大,尤其是在应用数据仓库的情况下。为什么会发生这种
- IP合法性校验是开发中非常常用的,看起来很简单的判断,作用确很大,写起来比较容易出错,今天我们来总结一下,看一下3种常用的IP地址合法性校验
- 做网站数据库,是选SQL Server还是Access好,可能您会说:选MySQL好,不过现在只是讨论IIS+ASP这种架构下的选择,不讨论
- 前几天,酋长同学在日志里提到了关于Google宽松的管理制度,一个产品任务下来是没有时间限制的,Google深信在有时间限制下的产品肯定是不
- 过年这段时间由于线上数据库经常压力过大导致响应非常缓慢甚至死机,咬咬牙下大决心来解决效率不高的问题!首先是由于公司秉承快速开发原则,频繁上线
- 所谓的列表推导式,就是指的轻量级循环创建列表。基本使用方式# 创建一个0-10的列表a = [x for x in range(11)]pr
- 前言众所周知字典(dict)对象是 Python 最常用的数据结构,社区曾有人开玩笑地说:"Python企图用字典装载整个世界&q
- cupy我觉得可以理解为cuda for numpy,安装方式pip install cupy,假设import numpy as npim
- 1. 功能分析1.加载文件夹内所有的Excel数据;2.生产贡献度分析图表(以柱状图显示表格数据);3.提起Excel表格中指定列数据;4.
- 今天服务器重新安装mssql2005版本,为了安全让mssql2005运行在独立用户下,权限也没错误,但竟然出现了以下错误; -------
- 需求:1.大量csv文件,以数字命名,如1.csv、2.cvs等;2.逐个打开,对csv文件中的某一列进行格式修改;3.将更改后的内容写入新
- python版本:3.5.4系统:win10 x64通过网页下载视频方法一:使用urllib.retrieve函数放函数只需要两个参数即可下
- 1、查询锁情况select sid,serial#,event,BLOCKING_SESSION from v$session where
- 如何在SQL2000的查询中使用XML-Data?具体程序如下:orders.asp<%@ Language=VBScrip
- TO_NUMBER(char[,'format_model']) 字符转换到数字类型TO_DATE(char[,'f
- 安装环境:CentOS7 64位 MINI版,安装MySQL5.71、配置YUM源在MySQL官网中下载YUM源rpm安装包:http://
- 踩坑记录:用pandas来做csv的缺失值处理时候发现奇怪BUG,就是excel打开csv文件,明明有的格子没有任何东西,当然,我就想到用p
- 首先来描述下环境,在机器上有很多个JAVA程序,我们在每个JAVA程序里都配置了一个启动|停止|重启的脚本举个例子:我们现在要同时运行这些脚