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 相关文章推荐
js编写trim()函数及正则表达式的运用
Oct 24 Javascript
jquery的ajax简单结构示例代码
Feb 17 Javascript
Javascript控制input输入时间格式的方法
Jan 28 Javascript
JavaScript中的getTime()方法使用详解
Jun 10 Javascript
分享我对JS插件开发的一些感想和心得
Feb 04 Javascript
微信小程序 switch组件详解及简单实例
Jan 10 Javascript
详解使用fetch发送post请求时的参数处理
Apr 05 Javascript
详解.vue文件中监听input输入事件(oninput)
Sep 19 Javascript
vue router仿天猫底部导航栏功能
Oct 18 Javascript
微信小程序websocket实现聊天功能
Mar 30 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
Jun 19 Javascript
vscode调试node.js的实现方法
Mar 22 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读注册表
2006/10/09 PHP
PHP+Mysql实现多关键字与多字段生成SQL语句的函数
2014/11/05 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
php 反斜杠处理函数addslashes()和stripslashes()实例详解
2016/12/25 PHP
php-app开发接口加密详解
2018/04/18 PHP
浅谈laravel aliases别名的原理
2019/10/24 PHP
JavaScript中的null和undefined解析
2012/04/14 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
深入浅析JavaScript面向对象和原型函数
2016/02/06 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
浅谈jQuery效果函数
2016/09/16 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
2018/05/02 Javascript
JavaScript选择排序算法原理与实现方法示例
2018/08/06 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
JS使用for in有序获取对象数据
2020/05/19 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
2020/07/31 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
2020/11/09 Javascript
[02:36]DOTA2英雄基础教程 帕格纳
2014/01/20 DOTA
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
python获取本机mac地址和ip地址的方法
2015/04/29 Python
python在指定目录下查找gif文件的方法
2015/05/04 Python
利用ctypes提高Python的执行速度
2016/09/09 Python
python中map()函数的使用方法示例
2017/09/29 Python
对Python中的@classmethod用法详解
2018/04/21 Python
python面试题小结附答案实例代码
2019/04/11 Python
python3实现猜数字游戏
2020/12/07 Python
python 利用jinja2模板生成html代码实例
2019/10/10 Python
美国著名童装品牌:OshKosh B’gosh
2016/08/05 全球购物
校园达人秀策划书
2014/01/12 职场文书
五好党支部事迹材料
2014/02/06 职场文书
尼克胡哲观后感
2015/06/08 职场文书
导游词之镇江焦山
2019/11/21 职场文书
Pycharm连接远程服务器并远程调试的全过程
2021/06/24 Python
pandas中关于apply+lambda的应用
2022/02/28 Python