vue2:Vant底部导航栏记录active,刷新页面记录active的值

2023-10-31

话不多说,直接上代码

<template>
  <div>
    <router-view/>
    <van-tabbar v-model="active" @change="change" fixed>
        <van-tabbar-item icon="home-o">
            <router-link to="/L1">标签</router-link>
        </van-tabbar-item>
        <van-tabbar-item icon="search">
            <router-link to="/L2">标签</router-link>
        </van-tabbar-item>
        <van-tabbar-item icon="friends-o">
            <router-link to="/L3">标签</router-link>
        </van-tabbar-item>
        <van-tabbar-item icon="setting-o">
            <router-link to="/L4">标签</router-link>
        </van-tabbar-item>
   </van-tabbar>
  </div>
</template>

<script>
export default {
    data() {
        return {
            active:0
        }
    },
    // 刷新页面的时候自动执行获取存储在localStorage的值
    created(){
        this.active = JSON.parse(localStorage.getItem('active'));
    },
    methods: {
        change(e){
            localStorage.setItem('active', e)
        }
    },
}
</script>

<style>

</style>

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue2:Vant底部导航栏记录active,刷新页面记录active的值 的相关文章

  • 使用material-ui@next 和 typescript 扩展主题

    创建我的主题时material ui我添加了两个新的调色板选项 为我提供了更好的明暗范围 我已经延长了Theme键入以表明这一点 import Theme from material ui styles import Palette fro
  • 使用 React js 和 Express API 服务器通过 fetch 发布对象

    我在 fetch 中的 post 方法遇到麻烦 因为我的服务器从客户端接收到一个空对象 我已经检查了客户端 但无法发送我想要发送的值 这是我的服务器 const express require express const app expre
  • 在移动浏览器或 PhoneGap 应用程序之间进行检测

    是否可以使用 JavaScript 检测用户是否通过浏览器或应用程序进行访问 我正在通过网页和 PhoneGap 应用程序开发适用于多个移动操作系统的混合应用程序 目标是 独立于部署目标使用相同的代码 仅当用户代理是应用程序时添加 Phon
  • 使用 fadeIn() 时,jQuery“未捕获类型错误:未定义不是函数”;

    我是 JS 新手 正在编写一个基本的富含 jQuery 的网页 其中同一文档中的每个页面都具有淡入 淡出功能 使用具有单独 ID 的相同 div 元素 无论如何 当我尝试淡入当前页面时 我收到错误 未捕获的类型错误 未定义不是函数 我在网上
  • 带有 nextjs 的 Material-ui 选项卡?

    我有一个 Material ui nextjs 和 typescript 项目 我正在尝试让我的导航栏与 nextjs 一起使用 import as React from react import AppBar from material
  • LeafletJs只显示一个国家

    我使用 Leafletjs 和 D3 来显示地图 我只想在地图上显示英国 Leaflet和D3是否可以只显示英国 这当然是可能的 现在的解决方案取决于您是想使用 D3 绘制英国 还是想从 Tile Server 获取它 在后一种情况下 有一
  • JavaScript 中的 ParseFloat 函数

    当我添加两个文本框值时1 001 and 0 001然后我做了一个parseFloat I get 1 0019999999 我要它1 002 你能帮助我吗 JavaScriptNumber http www w3schools com j
  • 仅当 url 以 www 为前缀时才会发生 CORS 错误

    我目前遇到一个关于 CORS 跨源资源共享 的问题 奇怪的是 只有当我使用 www url 前缀时 才会出现这种情况 例如 当我使用以下网址访问我的网站时 http example com index http example com in
  • 按住鼠标时 JavaScript 重复动作

    是否有一个 JavaScript 函数每隔如此多的毫秒重复一次 以至于按住 html 按钮 如果这可以使用标准 JavaScript 来完成 那就太好了 但使用 jQuery 或 jQuery 插件也很棒 On the mousedown
  • console.log 是如何工作的?

    第一个例子 在以下示例中 http jsfiddle net maniator ScTAW 4 http jsfiddle net maniator ScTAW 4 我有这个js var storage function var store
  • 添加数组的总和。显示1个输出

    更新 这个问题的答案如下 感谢在不同线程上进行的 dougtesting 将数组相加 显示总和 https stackoverflow com questions 45724641 add array together display su
  • 当 eslint 从子文件夹运行时无法解析相对模块路径

    当我从存储库的根文件夹运行 eslint 时 一切运行正常 没有错误 但是当我从子文件夹运行时 我会得到大量导入 未解决的问题 而当我从根目录运行时则不会发生这种情况 reporoot subfolder0 subfolder1 MyFil
  • 使用Doctype让scrollTop返回0,为什么?

    当我将此 Doctype 放入我的文档中时document body scrollTop返回零 这是为什么 当您使用该 Doctype 时 您会将每个当前浏览器放入所谓的几乎标准模式 http hsivonen iki fi doctype
  • 需要将焦点放在react中的div上

    我有一个之前用 H1 标签包裹的文本 页面加载后 我需要专注于该文本 为了方便起见 我将它包装在 div 中 render const translate billing primaryContactSelection true this
  • bootstrap-datetimepicker 仅显示日期

    我正在用这个repo https github com smalot bootstrap datetimepicker由 smalot 提供 我只想选择并显示日期 对于其他一些地方 我显示数据和时间 因此选择此存储库 我可以设法仅使用它来选
  • queue.js 是如何工作的?

    我一直试图理解如何Mike Bostock 的queue js https github com mbostock queue blob master queue js有效 但我看不出它是如何工作的 我不明白的部分是代码如何设法继续执行回调
  • 掩码输入数字 - 百分比

    如何通过 jQuery 创建具有百分比的数字掩码输入 我是否让输入仅接受三个数字 并在用户完成输入时在数字后添加百分号 keyup 我不使用插件 例子 1 Or 30 Or 99 Or 100 Or 200
  • Chrome 和 IE 上的滚动/延迟事件

    我试图让用户始终看到一个内容块 即使他向下滚动页面也是如此 他还应该能够上下滚动内容块 这是一个精简版本的小提琴 向您展示我的意思 http jsfiddle net 9ehfV 2 http jsfiddle net 9ehfV 2 人们
  • 在 Nest.js 中发送之前如何格式化响应?

    我按照文档进行操作 并能够添加用于响应映射的拦截器 我想要一致的 json 格式输出作为响应 我怎样才能用拦截器或其他比这种方法更好的方法来实现这一点 statusCode 201 message Custom Dynamic Messag
  • 如何选中表格中输入文本焦点上的复选框

    我试图在输入文本焦点上检查表 DOM 中的复选框 但无法访问复选框元素 但我的焦点正在工作 这是我的 jsfiddle 链接https jsfiddle net 9qha9vft https jsfiddle net 9qha9vft 这是

随机推荐

  • ftp 使用笔记

    https www ngui cc el 2911341 html action onClick 启动 systemctl start vsftpd service 查看启动状态 systemctl status vsftpd servic
  • dart 学习列表 List

    List 列表 在 Dart 编程语言中 List 是一种有序的集合数据类型 用于存储一系列项目 它允许您在单个变量中存储多个项目 并提供了许多操作来管理列表中的数据 以下是关于 Dart 中的 List 的一些重要信息 创建 List 您
  • QDialog类

    QDialog类 QDialog类 api 使用方式 调用exec 槽函数 调用accept槽函数 调用reject槽函数 调用done槽函数 例子 QDialog类 QWedget类中的函数 在QDialog中都可以使用 api 构造函数
  • 进程的状态与task_struct结构体

    一 什么是进程 进程 就是程序的一个执行实例 或正在执行的程序 详细介绍请看 点击打开链接 那么进程在Linux中有几种状态呢 如下 1 R 处于运行或可运行状态 即进程正在运行或在运行队列 可执行队列 中等待 只有在该状态的进程才可能在C
  • 程序员工作之后如何提升自己?

    IT行业人士里有不少人似乎从来就没晋升过 年复一年 他们工作在同一岗位上 停留在同一职位上 我不知道他们是否得到过晋升机会 你认识这样的人吗 这事居然出人意料地常见 如果你不想终老在这条死胡同上 就得做点什么 在本章中 我将给你一些如何攀登
  • git - 简明指南

    git 简明指南 助你入门 git 的简明指南 木有高深内容 安装 下载 git OSX 版 下载 git Windows 版 下载 git Linux 版 创建新仓库 创建新文件夹 打开 然后执行 git init 以创建新的 git 仓
  • windows开机运行jar

    windows开机自启动jar包 一 保存bat批处理文件 echo off 1 mshta vbscript CreateObject WScript Shell Run s0 0 FALSE window close exit java
  • 邮局选址问题

    邮局选址问题 题目描述 一条直线上有居民点 邮局只能建在居民点上 给定一个有序整形数组arr 每个值表示居民点的一维坐标 再给定一个正数num 表示邮局数量 选择num个居民点建立num个邮局 使所有的居民点到邮局的总距离最短 返回最短的总
  • 中国被黑站点统计系统 2006年9月分析报告

    源 中国被黑站点统计系统 http www zone h com cn amxku amxku at msn com 自在轮回 zizailunhui at msn com wayking wayking at hotmail com 目录
  • Matlab机器人工具箱画图卡顿解决方法

    机器人工具箱画图卡顿问题的解决 一般情况下 使用机器人工具箱画图就只是使用下面的命令 robot plot q 其中q为角度 但是这样画出的图非常卡顿 问题分析 默认画图指令画图效果如下 可以很清楚的看到 下面都是的方格已经多到模糊了 修改
  • FSDataOutputStream (浅析hadoop写入数据api)

    对于一般文件 都有满足随机读写的api 而hadoop中的读api很简单用FSDataInputStream类就可以满足一般要求 而hadoop中的写操作却是和普通java操作不一样 Hadoop对于写操作提供了一个类 FSDataOutp
  • 【JS&Html】一些总结

    html里面 监听回车事件 监听回车 若回车按下 执行相应操作 document onkeypress kDown if document layers window captureEvents Event KEYDOWN function
  • 提示工程师:如何高效的向ChatGPT提问对话

    最近ChatGPT真的火出圈了 现在打开知乎 博客 抖音 B站都是这方面的信息 ChatGPT相关的信息铺天盖地的袭转而来 对于这种类似新一轮信息技术革命 作为普通人的我们 该如何做呢 这是我们该思考的 英伟达创始人兼CEO黄仁勋 this
  • 闪回数据库案例

    闪回数据库案例 测试数据 create table sct4 id number 4 name varchar2 20 insert into sct4 values 1 lili insert into sct4 values 2 lil
  • 小孩报数问题

    import java util LinkedList import java util List import java util Scanner public class Main public static void main Str
  • Java笔记-多线程之线程池

    介绍 在前面的文章中 我们使用线程的时候就去创建一个线程 这样实现起来非常简便 但是就会有一个问题 程序启动一个新线程成本是比较高的 因为它涉及到要与操作系统进行交互 而使用线程池可以很好的提高性能 尤其是当程序中要创建大量生存期很短的线程
  • 最萌算法学习,一秒让程序员及其女友都能学会!

    普通程序员 不学算法 也可以成为大神吗 对不起 这个 绝对不可以 可是算法好难啊 看两页书就想睡觉 所以就不学了吗 就一直当普通程序员吗 如果有一本算法书 看着很轻松 又有代码示例 又有讲解 怎么会有那样的书呢 哎呀 最好学了算法人还能变得
  • OC中的copy和mutableCopy

    在OC中 对对象的拷贝可分为深拷贝和浅拷贝 深拷贝 会生成新的指针和新的内存 新的指针指向新开辟的内存空间 并且会将原来的内存中的内容也拷贝过来 浅拷贝 会生成新的指针 但是不会开辟新的内存空间 也不会拷贝原来内存中的内容 新生成的指针会指
  • 程序员的前20个搜索和排序算法面试问题

    大家好 如果您正在准备编程工作面试或正在寻找新工作 那么您知道这不是一个容易的过程 在您职业的任何阶段 您都必须幸运地接到电话并进行第一轮面试 但是在初学者方面 当您寻找第一份工作时就更加困难 这就是为什么您不能只是轻描淡写 您必须准备抓住
  • vue2:Vant底部导航栏记录active,刷新页面记录active的值

    话不多说 直接上代码