资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

如何在Vue.js中使用标签页组件

本篇文章给大家分享的是有关如何在Vue.js中使用标签页组件，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

涿州ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为成都创新互联公司的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：13518219792（备注：SSL证书合作）期待与您的合作！

index.html




 
 
 
 标签页组件
 


 
 
 
 标签一的内容
 
 
 标签二的内容
 
 
 标签三的内容
 
 
 
         var app = new Vue({  el: '#app',  data: {  activeKey: '1'  }  });  

样式表 style.css

[v-clock]{
 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: #fff;
 border: 1px solid #d7dde4;
 cursor: pointer;
 position: relative;
}
.tabs-tab-active{
 color: #ee99ff;
 border-top: 1px solid #3399ff;
 border-bottom: 1px solid #fff;
}
.tabs-tab-active:befor{
 content: '';
 display: block;
 height: 1px;
 background: #3399ff;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
}
.tabs-content{
 padding: 8px 0;
}

标签页外层的组件tabs tabs.js

Vue.component('tabs',{
 template: '\
 \
 \
 \
 \
 {{item.label}}\
 
\  
\  \  \  \  \  ',  props: {  value: {  type: [String, Number]  }  },  data: function () {  return {  //用于渲染tabs的标题  currentValue: this.value,  navList: []  }  },  methods: {  tabCls(item){  return [  'tabs-tab',  {  'tabs-tab-active': item.name === this.currentValue  }  ]  },  getTabs(){  //通过遍历子组件，得到所有的pane组件  return this.$children.filter(function (item) {  return item.$options.name === 'pane';  });  },  updateNav(){  this.navList = [];  //设置对this的引用，在function回调里，this的指向的并不是Vue实例  var _this = this;  this.getTabs().forEach((pane, index) => {  _this.navList.push({  label: pane.label,  name: pane.name || index  });  //如果没有给pane设置name，默认设置它的索引  if(!pane.name)  pane.name = index;  //设置当前选中的tab的索引  if(index === 0){  if(!_this.currentValue){  _this.currentValue = pane.name || index;  }  }  });  this.updateStatus();  },  updateStatus(){  var tabs = this.getTabs();  var _this = this;  //显示当前选中的tab对应的pane组件，隐藏没有选中的  tabs.forEach(tab => {  return tab.show = tab.name === _this.currentValue;  });  },  handleChange: function (index) {  var nav = this.navList[index];  var name = nav.name;  this.currentValue = name;  this.$emit('input', name);  this.$emit('on-click', name);  }  },  watch: {  value: val => {  this.currentValue = val;  },  currentValue: function () {  this.updateStatus();  }  } });

标签页嵌套的组件pane pane.js

Vue.component('pane',{
 name: 'pane',
 template: '\
 \
 \
 ',
 data: function () {
 return {
 show: true
 }
 },
 props: {
 name: String
 },
 label: {
 type: String,
 default: ''
 },
 methods: {
 updateNav: function () {
 this.$parent.updateNav();
 }
 },
 watch: {
 label: function () {
 this.updateNav();
 }
 },
 mounted: function () {
 this.updateNav();
 }
});

以上就是如何在Vue.js中使用标签页组件，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。


网页名称：如何在Vue.js中使用标签页组件
本文地址：http://cdkjz.cn/article/iecdop.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
天泽尚品装饰混凝土搅拌罐车达州做网站富顺网站建设谷歌推广广汉锦华成都铺面装修响应式网站设计方案成都网站制作vi形象设计

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图