vue实现动态显示与隐藏底部导航的方法分析

本文实例讲述了vue实现动态显示与隐藏底部导航的方法。分享给大家供大家参考，具体如下：

在日常项目中，总有几个页面是要用到底部导航的，总有那么些个页面，是不需要底部导航的，这里列举一下页面底部导航的显示与隐藏的两种方式：

方式一：

1. 路由配置meta: {footShow: true, }，

routes: [
  {
   path: '/',
   name: 'home',
   redirect: '/home', // 默认路由添加class
   component: home,
   meta: {
    footShow: true, // true显示，false隐藏
   },
  },

2. 在App.vue页面

<template>
 <div id="app">
  <router-view/>
  <foot v-if="$route.meta.footShow"></foot>
 </div>
</template>

方式二：

使用watch监听导航切换

watch: { // 监听路由变化
  $route (to, from) {
   let ThisPage = to.name;
   if (ThisPage === 'home' || ThisPage === 'healthcare' || ThisPage === 'healtharea' || ThisPage === 'personal') {
    this.footShow = true;
   } else {
    this.footShow = false;
   }
  }
 },

希望本文所述对大家vue.js程序设计有所帮助。

赞 (0)

相关推荐

  • Vue隐藏显示、只读实例代码

    1.Vue隐藏显示 <div style="padding-top:5px;" v-bind:class="{hidden: isHidden }"> <label class="inline"> <input id="id-button-borders" checked="" v-model="user.userstate" type="chec

  • vue组件实现弹出框点击显示隐藏效果

    本文实例为大家分享了vue实现弹出框点击显示隐藏的具体代码,供大家参考,具体内容如下 效果如下图 由于我的更改密码弹出框是一个组件引用的,所以在一开始是隐藏的,这就需要在当前的页面上对弹出框组件设置v-show,但是在弹出框显示出来的时候,操作执行完后当前页面的更改按钮已经被弹出框覆盖了.所以只能在弹出页面点击取消实现关闭隐藏弹出框.这样就需要写两个点击事件,但是两个点击事件就会有冲突,需要点击两下才能使弹出框显示和隐藏.然后我就用的以下方法,希望可以帮到大家!!! 代码如下 1.在当前页面中(

  • vue实现点击隐藏与显示实例分享

    如何使用vue进行按钮点击后指定区域内容隐藏,再次点击按钮隐藏内容显示.实现思路:首选需要设置一个属性为true(show:true),然后使用v-if把show属性绑定到要显示与内容的标签身上,最后给点击按钮添加点击事件,当show属性为true就设置为false,为false就设置为true(this.show = !this.show)即可. 1.新建一个html页面,然后在这个代码页面上创建一个div标签id为app,然后在这个div标签里创建一个按钮标签和一个用于显示隐藏的div标签.

  • Vue在页面右上角实现可悬浮/隐藏的系统菜单

    Vue在页面右上角实现可悬浮/隐藏的系统菜单

    这是个大多数网站很常见的功能,点击页面右上角头像显示一个悬浮菜单,点击页面其他位置或再次点击头像则菜单隐藏. 作为一个jQuery前端攻城狮实现这个功能可以说是很easy了,但是对只刚粗看了一遍vue文档的菜鸟来说,坑还是要亲自踩过才算圆满. 知识点 组件及组件间通信 计算属性 正文 1. 父组件 这里暂时只涉及系统菜单这一个功能,因此路由暂未涉及. 基本思路是:通过props将showCancel这个Boolean值传递到子组件,对父子组件分别绑定事件,来控制这个系统菜单的显示状态.其中在父组

  • vue.js使用v-if实现显示与隐藏功能示例

    vue.js使用v-if实现显示与隐藏功能示例

    本文实例讲述了vue.js使用v-if实现显示与隐藏功能.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1

  • vue实现动态显示与隐藏底部导航的方法分析

    本文实例讲述了vue实现动态显示与隐藏底部导航的方法.分享给大家供大家参考,具体如下: 在日常项目中,总有几个页面是要用到底部导航的,总有那么些个页面,是不需要底部导航的,这里列举一下页面底部导航的显示与隐藏的两种方式: 方式一: 1. 路由配置meta: {footShow: true, }, routes: [ { path: '/', name: 'home', redirect: '/home', // 默认路由添加class component: home, meta: { footS

  • ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案

    在有tabs的项目里,进入子层级时,底部导航还一直存在,本人是要让他只在首页几个界面存在,其他的隐藏,在这里用到了angularjs的指令,要完成这个步骤分为三步: 在标签ion-tabs中添加:ng-class="{'tabs-item-hide': $root.hideTabs}",源码如下 <ion-tabs class="tabs-icon-top" ng-class="{'tabs-item-hide': $root.hideTabs}&q

  • 详解微信小程序设置底部导航栏目方法

    详解微信小程序设置底部导航栏目方法

    详解微信小程序设置底部导航栏目方法 小程序底部想要有一个漂亮的导航栏目,不知道怎么制作,于是百度找到了本篇文章,分享给大家. 好了 小程序的头部标题 设置好了,我们来说说底部导航栏是如何实现的. 我们先来看个效果图 这里,我们添加了三个导航图标,因为我们有三个页面,小程序最多能加5个. 那他们是怎么出现怎么着色的呢?两步就搞定! 1. 图标准备 阿里图标库  http://www.iconfont.cn/collections/show/29 我们进入该网站,鼠标滑到一个喜欢的图标上面  点击下

  • Android ListView中动态显示和隐藏Header&Footer的方法

    ListView的模板写法 ListView模板写法的完整代码: •android代码优化----ListView中自定义adapter的封装(ListView的模板写法) 以后每写一个ListView,就这么做:直接导入ViewHolder.java和ListViewAdapter,然后写一个自定义adapter继承自ListViewAdapter就行了. ListView中动态显示和隐藏Header&Footer 如果需要动态的显示和隐藏footer的话,按照惯例,误以为直接通过setVis

  • vue elementUI表格控制显示隐藏对应列的方法

    vue elementUI表格控制显示隐藏对应列的方法

    本文实例为大家分享了vue elementUI表格控制显示隐藏对应列的具体代码,供大家参考,具体内容如下 需求:后端返回全部列数据.前端根据选项来显示对应的列,如果不勾选,默认全部隐藏. 效果图 勾选后显示对应的列 上代码 html部分 这里用v-if来显示隐藏,因为这个elementul组件的原因,v-show不生效,要用v-if <el-table-column         v-if="lists[0].ispass"           label="Uppe

  • vue.js实现插入数值与表达式的方法分析

    本文实例讲述了vue.js实现插入数值与表达式的方法.分享给大家供大家参考,具体如下: vue.js在插入数值的时候有三种方式 1.插入纯文本 插入纯文本是最简单的方式,使用双大括号就能插入想要的值. <span>{{ msg }}</span> mustache也可以在属性中使用 <div id="item-{{ id }}"></div> 就能显示所需要显示的文本信息了.但是有时候,我们想要插入的html文本,这时候要怎么办呢?在插入

  • Android实现动态显示或隐藏密码输入框的内容

    本文实例展示了Android实现动态显示或隐藏密码输入框内容的方法,分享给大家供大家参考之用.具体方法如下: 该功能可通过设置EditText的setTransformationMethod()方法来实现隐藏密码或者显示密码. 示例代码如下: private Button mBtnPassword; private EditText mEtPassword; private boolean mbDisplayFlg = false; /** Called when the activity is

  • uni-app 自定义底部导航栏的实现

    这是我目前发现较好的uni-app 自定义底部导航栏方法,其他方法的缺点主要是在切换时,要么会闪烁,要么会每点击一下,都会请求一次数据.如果有其他更好的方法,欢迎评论留言,最近才开始用uni-app写项目,之前只是看了下文档. 1. tabbar 组件 <template> <view class="tabbar-container"> <view :style="{ color: currentIndex == index ? '#007EFF

  • vue自定义底部导航栏Tabbar的实现代码

    如图所示,要完成类似的一个底部导航切换. 首先.我们需要分为5个大的VUE文件.可以根据自己的习惯来放在不同的位置. 我将5个主要的vue文件放在了5个不同的文件夹 然后,在components文件夹里新建Tabbar.vue/以及Item.vue文件 Item.vue文件如下 <template> <div class="itemWarp flex_mid" @click='changePage'> <span v-show='!bol'> <

  • mui-player自定义底部导航在vue项目中显示不出来的解决

    目录 mui-player自定义底部导航在vue项目中显示不出 效果图 总结 mui-player自定义底部导航在vue项目中显示不出 看了作者的源码和案例等,先上代码: <template> <div class="content-box"> <div class="container"> <div>视频插件 mui-player</div> <div id="mui-player&quo

随机推荐