定义在项目的基础组类别的 tab组件中,定义一个tab切换数量的数组 和一个currentIndex 当前高亮索引 的props,当前高亮(active)的类等于currentIndex === index 当前循环的索引值,增加点击派发事件传入index 索引参数,

调用组件的页面接受派发事件点击的index 索引,底下的内容根据this.currentIndex 的值v-if 显示隐藏

tab组件

<template>
<ul class="switches">
<li class="switch-item" v-for="(item,index) in switches" :class="{'active':currentIndex === index}"
@click="switchItem(index)">
<span>{{item.name}} </span>
</li>
</ul>
</template> <script type="text/ecmascript-6">
export default {
props: {
switches: {
type: Array,
default: []
},
currentIndex: {
type: Number,
default: 0
}
},
methods: {
switchItem(index) {
this.$emit('switch', index)
}
}
}
</script>

调用

<switches :switches="switches" :currentIndex="currentIndex" @switch="switchItem"></switches>
data() {
return {
currentIndex: 0,
switches: [
{
name: '最近播放'
},
{
name: '搜索历史'
}
]
}
}, switchItem(index) {
this.currentIndex = index
},

vue-music 关于基础组件 (Tab组件)的更多相关文章

  1. Vue学习计划基础笔记(六) - 组件基础

    组件基础 目标: 掌握组件的构建方式 掌握如何复用组件.父子组件如何传值.如何向父组件发送消息 掌握如何通过插槽分发内容 了解解析dom模板时的注意事项 了解动态组件 组件 组件理解起来大概上就和ph ...

  2. Vue – 基础学习(2):组件间 通信及参数传递

    Vue – 基础学习(2):组件间 通信及参数传递

  3. Vue简单基础 + 实例 及 组件通信

    vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...

  4. 组件基础之动态tab组件

    <template> <div id="demo31"> <p>-----------------组件基础之动态tab组件一---------- ...

  5. Vue可自定义tab组件

    在工作中我们常常要用到tab组件,如果有用第三方组件库的话一般都会有这个组件,但如果没有使用第三方组件库,或者想要自定义tab,那么或许这个无依赖的tab组件将会极大地节约你的开发时间.     如何 ...

  6. Vue基础之 动态组件

    为什么会有动态组件> vue 通过组件机制 实现的页面功能的模块化处理,通常情况下 我们在vue中使用组件  就是先定义组件 然后再需要的地方 插入组件即可 但是在某些情况下 需要根据不同的需求 ...

  7. 基于vue与vux做的可滑动tab组件(附源码)

    背景 前不久,刚完成了一个商品列表+购物车功能的页面,因为一级商品分类在顶部tab中显示,可滑动,间距可定制,如下图所示: 定制的tab需求如下: 1. 每个tab-item的间距是相同的,可定制 2 ...

  8. Vue基础学习 --- 全局组件与局部组件

    组件分为 全局组件 局部组件 全局组件 // 语法---Vue.component('组件名', {组件参数}) Vue.component('com1', { template: '<butt ...

  9. 从后端到前端之Vue(六)表单组件

    表单组件 做项目的时候会遇到一个比较头疼的问题,一个大表单里面有好多控件,一个一个做设置太麻烦,更头疼的是,需求还总在变化,一会多选.一会单选.一会下拉的,变来变去的烦死宝宝了. 那么怎么解决这个问题 ...

随机推荐

  1. VUE 内置的标签<keep-alive></keep-alive>作用

    <keep-alive></keep-alive> 的作用是 包裹动态组件时,会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染组件

  2. LightOJ 1326 – Race 第二类Stirling数/

    简单的模板题. 题意:问n匹马出现的不同排名数. 题解:可以使用DP,本质上还是第二类Stirling数(隔板法) #include <stdio.h> #include <iost ...

  3. freemarker中空值“”,null值的判断

    原文:http://zhousheng193.iteye.com/blog/1319772 <#if letVo.manageScore!=""> ${html('${ ...

  4. bzoj 4773: 负环——倍增

    Description 在忘记考虑负环之后,黎瑟的算法又出错了.对于边带权的有向图 G = (V, E),请找出一个点数最小的环,使得 环上的边权和为负数.保证图中不包含重边和自环. Input 第1 ...

  5. 作为一名前端开发工程师,你必须掌握的WEB模板引擎:Handlebars

    作为一名前端开发工程师,你必须掌握的WEB模板引擎:Handlebars 一.为什么需要使用模板引擎? 关于为什么要使用模板引擎,按照我常对学生说的一句话就是:不用重复造轮子..   简单来说,模板最 ...

  6. setTimeout()和setInterval()方法的区别

    setTimeout(); //5秒后执行yourFunction(),只执行一次 setInterval(); //每隔5秒执行一次 1.setTimeout(funhander,time)的作用是 ...

  7. linux系统引导流程

    1.固件:硬件和软件结合.加电自检是我们按下电源会检测硬件像cpu.内存.网卡等信息.(从硬件层次检测硬件是否可用) 固件设置实例:设置时间 软件时间和硬件时间: [root@VM_0_12_cent ...

  8. nginx路由文件配置

    nginx中文文档 Nginx 的请求处理有多个阶段,比如说rewrite.access.content等等,不同的配置字段属于不同的配置阶段,不同阶段的先后执行顺序不一样,例如rewrite在con ...

  9. 移动端测试===Android内存泄露和GC机制(转)

    本文转自:https://www.testwo.com/article/1153 1.前言 Hello,小伙伴们,相信大家在项目测试中都遇到过内存泄露问题,小编也着实爬过很多坑.比如小编所测项目,更换 ...

  10. 64_g5

    golang-github-kr-text-devel-0-0.11.git6807e77.f..> 11-Feb-2017 07:48 14250 golang-github-kr-text- ...