html：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="style.css">
  6.     <title>Title</title>
  7. </head>
  8. <body>
  9.     <div id="app">
  10.         <tabs v-model="activeKey">
  11.             <pane label="图片">
  12.                 我是图片内容...
  13.             </pane>
  14.             <pane label="视频">
  15.                 我是视频内容...
  16.             </pane>
  17.             <pane label="音乐">
  18.                 我是音乐内容...
  19.             </pane>
  20.             <pane label="文章">
  21.                 我是文章内容...
  22.             </pane>
  23.         </tabs>
  24.     </div>
  25.     <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  26.     <script src="pane.js"></script>
  27.     <script src="tabs.js"></script>
  28.     <script>
  29.         var app = new Vue({
  30.             el: '#app',
  31.             data: {
  32.                 activeKey: '0'
  33.             }
  34.         })
  35.     </script>
  36. </body>
  37. </html>

css：

  1. [v-cloak] {
  2.     display: none;
  3. }
  4.  
  5. .tabs {
  6.     font-size: 14px;
  7.     color:#657180;
  8. }
  9.  
  10. .tabs-bar:after{
  11.     content:'';
  12.     display: block;
  13.     width: 100%;
  14.     height: 1px;
  15.     background: #d7dde4;
  16.     margin-top:-1px;
  17. }
  18.  
  19. .tabs-tab {
  20.     display: inline-block;
  21.     padding: 4px 16px;
  22.     margin-right: 6px;
  23.     background: #ffffff;
  24.     border: 1px solid #d7dde4;
  25.     cursor: pointer;
  26.     position: relative;
  27. }
  28.  
  29. .tabs-tab-active {
  30.     color: #3399ff;
  31.     border-top: 1px solid #3399ff;
  32.     border-bottom: 1px solid #ffffff;
  33. }
  34.  
  35. .tabs-tab-active:before {
  36.     content: '';
  37.     display: block;
  38.     height: 1px;
  39.     background: #3399ff;
  40.     position: absolute;
  41.     top:;
  42.     left:;
  43.     right:;
  44. }
  45.  
  46. .tabs-content {
  47.     padding: 8px 0;
  48. }

pane.js:

  1. Vue.component('pane',{
  2.     name: 'pane',
  3.     template: '<div class="pane" v-show="show">\
  4.                     <slot></slot>\
  5.                </div>',
  6.     props: {
  7.         label: {
  8.             type: String,
  9.             default: ''
  10.         }
  11.     },
  12.     data: function () {
  13.         return {
  14.             show: true
  15.         }
  16.     },
  17.     methods: {
  18.         updateNav: function () {
  19.             this.$parent.updateNav();
  20.         }
  21.     },
  22.     watch: {
  23.         label: function () {
  24.             this.updateNav();
  25.         }
  26.     },
  27.     mounted: function () {
  28.         this.updateNav();
  29.     }
  30. })

tabs.js:

  1. Vue.component('tabs',{
  2.     template: '<div class="tabs">\
  3.                     <div class="tabs-bar">\
  4.                         <div \
  5.                         v-for="(label,index) in navList"\
  6.                         :class="tabCls(index)"\
  7.                         @click="handleChange(index)">\
  8.                             {{label}}\
  9.                         </div>\
  10.                     </div>\
  11.                     <div class="tabs-content">\
  12.                          <slot></slot>\
  13.                     </div>\
  14.               </div>',
  15.     props: {
  16.         value: {
  17.             type: String
  18.         }
  19.     },
  20.     data: function () {
  21.         return {
  22.             navList: [],
  23.             currentValue: this.value
  24.         }
  25.     },
  26.     methods: {
  27.         tabCls: function (index) {
  28.             return [
  29.                 'tabs-tab',
  30.                 {
  31.                     'tabs-tab-active':index == this.currentValue
  32.                 }
  33.             ]
  34.         },
  35.         getTabs: function () {
  36.             return this.$children.filter(function (t) {
  37.                 return t.$options.name === 'pane';
  38.             });
  39.         },
  40.         updateNav: function () {
  41.             this.navList = [];
  42.             var _this = this;
  43.             this.getTabs().forEach(function (t) {
  44.                 _this.navList.push(t.label);
  45.             })
  46.             this.updateStatus();
  47.         },
  48.         updateStatus: function () {
  49.             var _this = this;
  50.             this.getTabs().forEach(function (t,i) {
  51.                 t.show = i == _this.currentValue;
  52.  
  53.             })
  54.         },
  55.         handleChange: function (index) {
  56.             this.currentValue = index;
  57.             this.$emit('input',index);
  58.         }
  59.     },
  60.     watch: {
  61.         currentValue: function () {
  62.             this.updateStatus();
  63.         },
  64.         value: function (val) {
  65.             this.currentValue = val;
  66.         }
  67.     }
  68. })

效果图：

《vue.js实战》练习---标签页组件的更多相关文章

  1. 每天记录一点：NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发

    每天记录一点:NetCore获得配置文件 appsettings.json   用NetCore做项目如果用EF  ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...

  2. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  3. Vue.js 实战总结

    最近在某个项目中用到了Vue.js,从上手做开发到项目发布,一步步踩了不少坑.本文试图总结过去一个多月使用Vue.js中的一些经验,也算是一点心得体会吧,拿出来与大家分享,欢迎多多交流. Vue.js ...

  4. vue.js实战——购物车练习（包含全选功能）

    vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...

  5. vue.js 实战 todo list

    vue.js 起源 vue.js 的作者是尤雨溪,是一名中国人,之前在谷歌工作,现在在全职维护 vue 项目. vue.js 是 2014 年推出来的.现在已经更新到 2.x 版本,3.0 版本会在 ...

  6. vue.js入门（3）——组件通信

    5.2 组件通信 尽管子组件可以用this.$parent访问它的父组件及其父链上任意的实例,不过子组件应当避免直接依赖父组件的数据,尽量显式地使用 props 传递数据.另外,在子组件中修改父组件的 ...

  7. js基础--浏览器标签页隐藏或显示状态 visibility详解

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 在工作中我们可能会遇到这样的需求,当浏览器切换到别的标签页或着最小化时,我们需要暂停页面上正在播放的视频或者音乐,这个需求 ...

  8. 分享Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站

    这是个什么的项目? 使用 Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站. 博客线上地址:www.boblog.com Github地址:https: ...

  9. Vue.js 3.x 中跨层级组件如何传递数据？

    provide/inject 基本用法 在 Vue.js 中,跨层级组件如果想要传递数据,我们可以直接使用 props 来将祖先组件的数据传递给子孙组件: 注:上图来自 Vue.js 官网:Prop ...

  10. Vue.js 系列教程 2：组件，Props，Slots

    原文:intro-to-vue-2-components-props-slots 译者:nzbin 这是关于 JavaScript 框架 Vue.js 五个教程的第二部分.在这一部分,我们将学习组件, ...

随机推荐

  1. 20145202马超 2016-2017-2 《Java程序设计》第四周学习总结

    20145202马超 2016-2017-2 <Java程序设计>第四周学习总结 教材学习内容总结 继承:打破了封装性 extends 1.提高了代码的复用性. 2.让类与类之间产生了关系 ...

  2. gp的纯属意外的意外

    一不小心,把方法都传过去了,一脸蒙蔽说的就是我,啊哈哈哈啊哈

  3. fsync体会

    看这个链接:http://www.postgresql.org/docs/9.1/static/runtime-config-wal.html 是这样说的: fsync (boolean) If th ...

  4. Excel拼接字符串

             有时候,需要把一些Excel表格中的内容进行拼接,比如A4行的值是前面三行值的加起来.在Excel中可以使用&来进行这种操作.如果数据非常多,就可以使用这个来进行批量操作.

  5. VectorDrawable在Android中的配置

    一.让Android支持VectorDrawable apply plugin: 'com.android.application' android { defaultConfig { vectorD ...

  6. OpenCV入门：（三：图片Mask operations）

    Mask operations 翻译为中文应该是掩模操作,具体操作步骤就是根据一个操作矩阵(又名kernel)处理图片中的每一个像素点,操作矩阵会根据当前像素点的周围像素来调整当前像素值. 1.示例 ...

  7. 从webview中加载assets中的html文件

    private void readHtmlFormAssets(){ WebSettings webSettings = tipsWebView.getSettings(); webSettings. ...

  8. Vue学习（二）：class与style绑定

    <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml&q ...

  9. LR创建数据源读取excel

    1 在window上创建数据源   2 创建对应的数据文件 excel 注:注意格式和底部的表单名称 3 Vegen中创建参数 注意:机器数据源选择windows的ODBC数据源 SQL查的是(she ...

  10. Sql面试题之三（难度：简单| 含答案）

    Sql面试题之三(难度:简单| 含答案) 答案: .SELECT B.name, B.Depart T.Content FROM B, T WHERE ( T.Content = '税法培训' and ...