Vue.js组件tabs实现选项卡切换效果


Posted in Javascript onDecember 01, 2016

今天给大家分享一个小颖自己写的vue组件,因为小颖也才接触vue没多久,如果有什么不足的地方,希望大家提出来,小颖加以改正.以下就是具体如何实现tabs啦。

调用示例:

<template>
<div class="tabs-contents">
<!-- 调用tabs组件 -->
 <tabs :flag.sync='tabsShowFlag' :navtitle='navTitle' :navdata='navData'>
 <div class="tabs-body">
 <div v-if='navData[0].showFlag>0'>
 <div class="one-content">
 <p>二十国集团领导人第十一次峰会将于9月4日至5日在浙江杭州举行。峰会主题为“构建创新、活力、联动、包容的世界经济”。二 十国集团成员和嘉宾国领导人及有关国际组织负责人将应邀与会。中国国家主席将出席并主持会议,并出席金砖国家领导人非正式会晤等有关活动。二十国集团工商峰会将于9月3日至4日在浙江杭州举行。中国国家主席将出席开幕式并发表主旨演讲。部分二十国集团成员和嘉宾国领导人及有关国际组织负责人将应邀与会。 </p>
 </div>
 </div>
 <div v-if='navData[1].showFlag>0'>
 <div class="two-content">
 <p>党员领导干部</p>
 <div>
 盘点历届奥运会中国乒乓球队精彩比赛瞬间。2016里约奥运会乒乓球男团半决赛,中国3-0韩国晋级,张继科遭遇韩国小将郑荣植的顽强阻击,在两度落后的情况下,苦战五局才得以3:2涉险过关。图为张继科精彩比赛瞬间。
 </div>
 </div>
 </div>
 <div v-if='navData[2].showFlag>0'>
 <label class="glyphicon glyphicon-asterisk"></label>
 <span class="glyphicon glyphicon-remove"></span>
 <div class="two-content">
 <p>都说程序员有三宝:人傻,钱多,死得早。博主身边的程序“猿”一大半应了这三宝,这从侧面说明了一个问题,只有理性是过不好日子的。朋友们应该把工作与生活分开,让生活变得感性,让工作变得理性,两者相提并行,岂不快哉。咳,话题扯得有点远,今天博主给大家写一篇关于css如何设置select、radio 、 checkbox 、file样式的问题,这里不涉及模拟框,仅介绍原生情况下如何做到自定义样式,废话不多说,赖次够!</p>
 <div>
 北京时间8月16日早上,中国游泳队抵达北京,队员们一走出到达出口就被热情的粉丝们蜂拥围堵,尤其是宁泽涛、傅园慧等高人气运动员,更是寸步难行。供图:视觉中国
 </div>
 </div>
 </div>
 <div v-if='navData[3].showFlag>0'>
 <div class="form-horizontal">
 <div class="form-group">
 <label class="col-sm-3 control-label"><span class='add-people-sign'>*</span>姓名:</label>
 <div class="col-sm-2"><input type="text" class="form-control"></div>
 </div>
 </div>
 </div>
 </div>
 </tabs>

</div>
</template>
<script>
import tabs from './yezitabs.vue' //引入组件
export default {
 components: {
 tabs,
 },
 ready: function() {
 },
 methods: {
 },
 data() {
 return {
 tabsShowFlag:true,
 navTitle:'新闻',
 navData: [{
 key: 'biubiu',
 showFlag: 1,
 }, {
 key: '豆豆打豆豆',
 showFlag: -1,
 }, {
 key: '单身汪',
 showFlag: -1
 },{
 key: '喵嘞个咪',
 showFlag: -1
 }],
 }
 },
}
</script>
<style scoped>
</style>

实现tabs:

<template>
<div class="tabs-content" v-if='flag'>
 <div class="top">
 <div class="title">{{navtitle}}</div>
 <ul class="nav nav-tabs">
 <li v-for='(navindex,nav) in navdata' class="nav-li" v-bind:class='{active:nav.showFlag>=0}' @click='keyShowFun(navindex)'>
 <a href="#">{{nav.key}}</a>
 </li>
 </ul>
 </div>
 <div class="v-tabs-item">
 <slot></slot>
 </div>
</div>
</template>
<script>
export default {
 props: {
 flag: {
 type: Boolean,
 required: true,
 twoWay: true
 },
 navtitle: {
 type: String,
 default: ''
 },
 navdata: {
 type: Array,
 required: true,
 },
 },
 components: {

 },
 ready: function() {

 },
 methods: {
 keyShowFun:function(index){
 let _this=this;
 _this.navdata.forEach(function(item){
 item.showFlag=-1;
 });
 _this.navdata[index].showFlag=1;
 }
 },
 data() {
 return {
 }
 },
}
</script>
<style scoped>

</style>

效果图:

Vue.js组件tabs实现选项卡切换效果

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

如果大家还想深入学习,可以点击两个精彩的专题:javascript选项卡操作方法汇总 jquery选项卡操作方法汇总

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery的AJAX实现文件下载的小例子
May 15 Javascript
在Firefox下js select标签点击无法弹出
Mar 06 Javascript
javascript常用代码段搜集
Dec 04 Javascript
js获取隐藏元素宽高的实现方法
May 19 Javascript
jQuery UI Bootstrap是什么?
Jun 17 Javascript
解决Angular.Js与Django标签冲突的方案
Dec 20 Javascript
微信小程序 支付功能(前端)的实现
May 24 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 Javascript
对vue中methods互相调用的方法详解
Aug 30 Javascript
JS开发自己的类库实例分析
Aug 28 Javascript
Layui点击图片弹框预览的实现方法
Sep 16 Javascript
浏览器JavaScript调试功能无法使用解决方案
Sep 18 Javascript
IE8兼容Jquery.validate.js的问题
Dec 01 #Javascript
利用JQuery阻止事件冒泡
Dec 01 #Javascript
Vue.js第三天学习笔记(计算属性computed)
Dec 01 #Javascript
实例解析jQuery中如何取消后续执行内容
Dec 01 #Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
Dec 01 #Javascript
jQuery中ajax错误调试分析
Dec 01 #Javascript
JQuery学习总结【二】
Dec 01 #Javascript
You might like
PHP制作登录异常ip检测功能的实例代码
2016/11/16 PHP
php实现保存周期为1天的购物车类
2017/07/07 PHP
基于PHP-FPM进程池探秘
2017/10/17 PHP
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
解释&amp;&amp;和||在javascript中的另类用法
2014/07/28 Javascript
jquery控制页面部分刷新的方法
2015/06/24 Javascript
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
js弹性势能动画之抛物线运动实例详解
2017/07/27 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
React Native基础入门之调试React Native应用的一小步
2018/07/02 Javascript
react配置antd按需加载的使用
2019/02/11 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
2020/09/07 Javascript
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
python扫描proxy并获取可用代理ip的实例
2017/08/07 Python
详解python基础之while循环及if判断
2017/08/24 Python
python读取视频流提取视频帧的两种方法
2020/10/22 Python
python 实现多维数组转向量
2019/11/30 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
雪花秀美国官方网站:韩国著名草本护肤化妆品品牌
2016/10/19 全球购物
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
Java的类与C++的类有什么不同
2014/01/18 面试题
幼儿园元旦家长感言
2014/02/27 职场文书
期末评语大全
2014/05/04 职场文书
社区综治宣传月活动总结
2014/07/02 职场文书
办理房产过户的委托书
2014/09/14 职场文书
Java Dubbo框架知识点梳理
2021/06/26 Java/Android
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers