<template>
<div id="app">
<div class="tabbar">
<div class="mytab" v-for="(tab, i) in tabs" @click="forChageTag(i)">
<router-link class="tab" :to="tab.turl">
<img class="icon" :src="tab.icon">
<p :class="{title:hastitle,active:tab.hasactive}">{{tab.title}}</p>
</router-link>
</div>
</div>
<router-view/>
</div>
</template>

<script>
export default {
name: 'App',
data () {
return {
activeTab: 0,
hastitle: true,
tabs: [{
title: '看点',
icon: '../../static/Image/ico_home_p.png',
icons: '../../static/Image/ico_home_p.png',
icon01: '../../static/Image/ico_home_n.png',
turl: '/kand',
hasactive: true
}, {
title: '视频',
icon: '../../static/Image/ico_video_n.png',
icons: '../../static/Image/ico_video_p.png',
icon01: '../../static/Image/ico_video_n.png',
turl: '/video',
hasactive: false
}, {
title: '任务中心',
icon: '../../static/Image/icon_red_.png',
icons: '../../static/Image/icon_red_.png',
icon01: '../../static/Image/icon_red_.png',
turl: '/task',
hasactive: false
}, {
title: '我的',
icon: '../../static/Image/ico_mine_n.png',
icons: '../../static/Image/ico_mine_p.png',
icon01: '../../static/Image/ico_mine_n.png',
turl: '/me',
hasactive: false
}]
}
},
methods:{
forChageTag (index){
console.log(this.tabs.length);
var tablen = this.tabs.length;
for(var n = 0;n < tablen; n++){
console.log(n)
console.log(index)
if(n == index){
this.tabs[index].icon = this.tabs[index].icons;
this.tabs[index].hasactive = true;
}else{
this.tabs[n].icon = this.tabs[n].icon01;
this.tabs[n].hasactive = false;
}
}
}
},
mounted: function(){
}
}

</script>

<style lang="stylus" scoped>
.tabbar
width:100%
display:flex
padding:20px 0
position:fixed
bottom:0
left:0
& > .mytab
flex:1
text-align:center
& > .tab > img
width:70px
height:70px
p.title
margin-top:15px
.active
color:#f00
</style>

组件切换和底导航切换,状态变化

自己写的vue底导航的更多相关文章

  1. 写一个vue组件

    写一个vue组件 我下面写的是以.vue结尾的单文件组件的写法,是基于webpack构建的项目.如果还不知道怎么用webpack构建一个vue的工程的,可以移步到vue-cli. 一个完整的vue组件 ...

  2. vue侧边栏导航和右边内容一样高

    vue侧边栏导航和右边内容一样高吗? 失败了,最后用做导航和上导航 定位, 右内容类似滚动条 效果: 直接把top导航和左侧导航栏display:flxed定位左边,右边内容left: top

  3. 一个手写的Vue放大镜,复制即可使用

    一个手写的vue放大镜 组件使用less,请确保已安装loader 本组件为放大镜组件,传参列表为: width: 必传,设置放大镜的宽高(正方形),放大区域等同,放大倍数为2倍 picList:必传 ...

  4. 超详细Vue实现导航栏绑定内容锚点+滚动动画+vue-router(hash模式可用)

    超详细Vue实现导航栏绑定内容锚点+滚动动画+vue-router(hash模式可用) 转载自:https://www.jianshu.com/p/2ad8c8b5bf75 亲测有效~ <tem ...

  5. Nuxt/Vue自定义导航栏Topbar+标签栏Tabbar组件

    基于Vue.js实现自定义Topbar+Tabbar组件|仿咸鱼底部凸起导航 最近一直在倒腾Nuxt项目,由于Nuxt.js是基于Vue.js的服务端渲染框架,只要是会vue,基本能很快上手了. 一般 ...

  6. vue项目导航菜单实现

    vue项目导航菜单问题 目标:横向菜单点击跳转,颜色变换,刷新可保持状态 // 模板template中通过循环菜单列表生成,动态类名改变颜色 <li v-for="(item, ind ...

  7. 谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo

    前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ..... ...

  8. vue 路由导航白话全解析

    这里先放上官网的教程和说明:点击这里,vue导航守卫官方文档 路由守卫 路由守卫说白了就是路由拦截,在地址栏跳转之前 之后 跳转的瞬间 干什么事 全局守卫 全局守卫顾名思义,就是全局的,整个项目所有路 ...

  9. Vue+ElementUI 导航组件

    创建导航页组件 在components目录下新建一个navigation目录,在Navi目录中新建一个名为Navi.vue的组件.至此我们的目录应该是如下图所示: 然后我们修改main.js文件,修改 ...

随机推荐

  1. 【集群实战】NFS网络文件共享服务3-相关知识补充(showmount,exports,rpc)

    1. showmount命令说明 showmount命令一般用于从NFS客户端检查NFS服务器端共享目录的情况. 参数说明: -e,--exports 显示NFS服务器输出的目录列表 [root@we ...

  2. 在线图片资源转换成Base64格式

    function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width ...

  3. JS编程建议——11:慎重使用伪数组

    建议11:慎重使用伪数组JavaScript没有真正的数组,因此typeof运算符不能辨别数组和对象.伪数组在JavaScript中有很高的易用性,程序员不用给它设置维度,而且永远不用担心产生越界错误 ...

  4. CF思维联系– Codeforces-987C - Three displays ( 动态规划)

    ACM思维题训练集合 It is the middle of 2018 and Maria Stepanovna, who lives outside Krasnokamensk (a town in ...

  5. 白话typescript中的【extends】和【infer】(含vue3的UnwrapRef)

    大家好,我是小雨小雨,致力于分享有趣的.实用的技术文章. 内容分为翻译和原创,如果有问题,欢迎随时评论或私信,希望和大家一起进步. 分享不易,希望能够得到大家的支持和关注. extends types ...

  6. Springboot-WebFlux实现http重定向到https

    1 简介 Spring WebFlux是一个新兴的技术,Spring团队把宝都压在响应式Reactive上了,于是推出了全新的Web实现.本文不讨论响应式编程,而是通过实例讲解Springboot W ...

  7. Android EXCEL 解析 xls 和 xlsx,方法其实很简单

    前言 Excel 解析,一般来说是在服务端进行的,但是如果移动端要实现解析Excel的功能,那也是有实现的方法的. 不过由于Android 原生用Java/Kotlin实现,所以也可以参考服务端解析E ...

  8. JS中由闭包引发内存泄露的深思

    目录 一个存在内存泄露的闭包实例 什么是内存泄露 JS的垃圾回收机制 什么是闭包 什么原因导致了内存泄露 参考 1.一个存在内存泄露的闭包实例 var theThing = null; var rep ...

  9. 2020牛客寒假算法基础集训营1 J题可以回顾回顾

    2020牛客寒假算法基础集训营1 这套题整体来说还是很简单的. A.honoka和格点三角形 这个题目不是很难,不过要考虑周全,面积是1,那么底边的长度可以是1也可以是2, 注意底边1和2会有重复的, ...

  10. G. Yash And Trees 线段树 + dfs序 + bitset

    这个是要用bitset 一个大整数的二进制 学习推荐博客 这个题目大意就是:给你n,m 还有一个序列,还有一个一棵树,有一种操作一种询问 操作是给你一个节点 把这个节点及其子节点都加上x 询问是 给你 ...