《vue.js实战》练习---标签页组件
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Title</title>
</head>
<body>
<div id="app">
<tabs v-model="activeKey">
<pane label="图片">
我是图片内容...
</pane>
<pane label="视频">
我是视频内容...
</pane>
<pane label="音乐">
我是音乐内容...
</pane>
<pane label="文章">
我是文章内容...
</pane>
</tabs>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="pane.js"></script>
<script src="tabs.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
activeKey: '0'
}
})
</script>
</body>
</html>
css：
[v-cloak] {
display: none;
}
.tabs {
font-size: 14px;
color:#657180;
}
.tabs-bar:after{
content:'';
display: block;
width: 100%;
height: 1px;
background: #d7dde4;
margin-top:-1px;
}
.tabs-tab {
display: inline-block;
padding: 4px 16px;
margin-right: 6px;
background: #ffffff;
border: 1px solid #d7dde4;
cursor: pointer;
position: relative;
}
.tabs-tab-active {
color: #3399ff;
border-top: 1px solid #3399ff;
border-bottom: 1px solid #ffffff;
}
.tabs-tab-active:before {
content: '';
display: block;
height: 1px;
background: #3399ff;
position: absolute;
top:;
left:;
right:;
}
.tabs-content {
padding: 8px 0;
}
pane.js:
Vue.component('pane',{
name: 'pane',
template: '<div class="pane" v-show="show">\
<slot></slot>\
</div>',
props: {
label: {
type: String,
default: ''
}
},
data: function () {
return {
show: true
}
},
methods: {
updateNav: function () {
this.$parent.updateNav();
}
},
watch: {
label: function () {
this.updateNav();
}
},
mounted: function () {
this.updateNav();
}
})
tabs.js:
Vue.component('tabs',{
template: '<div class="tabs">\
<div class="tabs-bar">\
<div \
v-for="(label,index) in navList"\
:class="tabCls(index)"\
@click="handleChange(index)">\
{{label}}\
</div>\
</div>\
<div class="tabs-content">\
<slot></slot>\
</div>\
</div>',
props: {
value: {
type: String
}
},
data: function () {
return {
navList: [],
currentValue: this.value
}
},
methods: {
tabCls: function (index) {
return [
'tabs-tab',
{
'tabs-tab-active':index == this.currentValue
}
]
},
getTabs: function () {
return this.$children.filter(function (t) {
return t.$options.name === 'pane';
});
},
updateNav: function () {
this.navList = [];
var _this = this;
this.getTabs().forEach(function (t) {
_this.navList.push(t.label);
})
this.updateStatus();
},
updateStatus: function () {
var _this = this;
this.getTabs().forEach(function (t,i) {
t.show = i == _this.currentValue;
})
},
handleChange: function (index) {
this.currentValue = index;
this.$emit('input',index);
}
},
watch: {
currentValue: function () {
this.updateStatus();
},
value: function (val) {
this.currentValue = val;
}
}
})
效果图：
《vue.js实战》练习---标签页组件的更多相关文章
- 每天记录一点：NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发
每天记录一点:NetCore获得配置文件 appsettings.json 用NetCore做项目如果用EF ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...
- 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能
大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...
- Vue.js 实战总结
最近在某个项目中用到了Vue.js,从上手做开发到项目发布,一步步踩了不少坑.本文试图总结过去一个多月使用Vue.js中的一些经验,也算是一点心得体会吧,拿出来与大家分享,欢迎多多交流. Vue.js ...
- vue.js实战——购物车练习（包含全选功能）
vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...
- vue.js 实战 todo list
vue.js 起源 vue.js 的作者是尤雨溪,是一名中国人,之前在谷歌工作,现在在全职维护 vue 项目. vue.js 是 2014 年推出来的.现在已经更新到 2.x 版本,3.0 版本会在 ...
- vue.js入门（3）——组件通信
5.2 组件通信 尽管子组件可以用this.$parent访问它的父组件及其父链上任意的实例,不过子组件应当避免直接依赖父组件的数据,尽量显式地使用 props 传递数据.另外,在子组件中修改父组件的 ...
- js基础--浏览器标签页隐藏或显示状态 visibility详解
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 在工作中我们可能会遇到这样的需求,当浏览器切换到别的标签页或着最小化时,我们需要暂停页面上正在播放的视频或者音乐,这个需求 ...
- 分享Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站
这是个什么的项目? 使用 Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站. 博客线上地址:www.boblog.com Github地址:https: ...
- Vue.js 3.x 中跨层级组件如何传递数据？
provide/inject 基本用法 在 Vue.js 中,跨层级组件如果想要传递数据,我们可以直接使用 props 来将祖先组件的数据传递给子孙组件: 注:上图来自 Vue.js 官网:Prop ...
- Vue.js 系列教程 2：组件，Props，Slots
原文:intro-to-vue-2-components-props-slots 译者:nzbin 这是关于 JavaScript 框架 Vue.js 五个教程的第二部分.在这一部分,我们将学习组件, ...
随机推荐
- java 单例模式（singleton）
概念: 保证一个类仅有一个实例,并提供一个访问它的全局访问点. 要点: 1.某个类只有一个实例. 2.它必须自行创建这个示例. 3.必须自行向整个系统提供这个示例. 实现: 1.拥有一个私有的构造器. ...
- 【WPF】创建基于模板的WPF控件（经典）
原文:[WPF]创建基于模板的WPF控件(经典) WPF可以创建两种控件,它们的名字也很容易让人混淆:用户控件(User Control)和定制控件(Customer Control),之所以如此命名 ...
- 【娱乐向】制作Chrome天气预报扩展程序
1.什么是Chrome扩展程序 Chrome扩展程序是一个用Web技术开发,用来扩展增强浏览器功能的软件.和一般的网页一样,Chrome扩展程序由html.js.css和图片等部分组成.Chrome插 ...
- Android Stadio 指定文件打开类型
我们项目里面,有一个文件,叫做aaa.meta. 这个只是一个配置文件,里面是txt. 但是Android Stadio 不识别.怎么办? 设置如下图: 首先,打开Android stadio 的设置 ...
- Encrypted bootloader (程序BIN文件加密及在线升级）
了解更多关于bootloader 的C语言实现,请加我QQ: 1273623966 (验证信息请填 bootloader),欢迎咨询或定制bootloader(在线升级程序). 在上一个博客随笔,我介 ...
- 如何从海量IP中提取访问最多的10个IP
算法思想:分而治之+Hash 1.IP地址最多有2^32=4G种取值情况,所以不能完全加载到内存中处理: 2.可以考虑采用分而治之的思想,按照IP地址的Hash(IP) % 1024的值,把海量IP日 ...
- 【WPF】 前言
[WPF] 前言 前段时间项目中用到了WPF,就边学边做项目,一个项目做下来有点感触,以此记录. 以前也开发过多个C/S项目, 一直都是用的Winform,Winform 做些简单的界面很方便,基本只 ...
- 从循环里面用QPixmap new对象很耗时联想到的
1.在循环里面用QPixmap new图片对象延迟很高,这个是通过打时间日志得出的,深层原因还不清楚: 2.自制的图片浏览器在初始化的时候会初始化自己的一个图片列表,所以要用到上面的描述.所有图片的初 ...
- 『AngularJS』创建 Service
创建服务 Angular提供了几种有用的服务,对于所有的应用来说,你将会发现这些服务对于创建你自己的服务是有用处的.为了创建自己的服务,你应该从通过一个模块(module)注册一个服务工厂方法开始(可 ...
- Spring框架中ModelAndView、Model、ModelMap的区别
转自:http://blog.csdn.net/liujiakunit/article/details/51733211 1. Model Model 是一个接口, 其实现类为ExtendedMode ...