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 相关文章推荐
不用MOUSEMOVE也能滑动啊
May 23 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
Jul 13 Javascript
javascript 主动派发事件总结
Aug 09 Javascript
查看图片(前进后退)功能实现js代码
Apr 24 Javascript
javascript替换已有元素replaceChild()使用介绍
Apr 03 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
Sep 22 Javascript
简易的JS计算器实现代码
Oct 18 Javascript
AngularJS页面带参跳转及参数解析操作示例
Jun 28 Javascript
如何检查一个对象是否为空
Apr 11 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 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
星际RPG字典
2020/03/04 星际争霸
PHP实现把数字ID转字母ID
2013/08/12 PHP
php中函数前加&amp;符号的作用分解
2014/07/08 PHP
给ECShop添加最新评论
2015/01/07 PHP
PHP基于ip2long实现IP转换整形
2020/12/11 PHP
js螺旋动画效果的具体实例
2013/11/15 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
2015/12/02 Javascript
Jquery把获取到的input值转换成json
2017/05/15 jQuery
mint-ui在vue中的使用示例
2018/04/05 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
vue路由守卫+登录态管理实例分析
2019/05/21 Javascript
JS前端广告拦截实现原理解析
2020/02/17 Javascript
JS事件循环机制event loop宏任务微任务原理解析
2020/08/04 Javascript
Python脚本实现DNSPod DNS动态解析域名
2015/02/14 Python
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
对python多线程SSH登录并发脚本详解
2019/02/14 Python
Python 使用 docopt 解析json参数文件过程讲解
2019/08/13 Python
Python 读取用户指令和格式化打印实现解析
2019/09/02 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
解决python使用list()时总是报错的问题
2020/05/05 Python
keras中的loss、optimizer、metrics用法
2020/06/15 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
python 对xml解析的示例
2021/02/27 Python
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
电子商务专业实习生自我鉴定
2013/09/24 职场文书
《守株待兔》教学反思
2014/03/01 职场文书
会议主持词
2014/03/17 职场文书
优秀党员学习焦裕禄精神思想汇报范文
2014/09/10 职场文书
教师岗位职责
2015/02/03 职场文书
导游词之张家口
2019/12/13 职场文书
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python
利用Python读取微信朋友圈的多种方法总结
2021/08/23 Python
使用Apache Camel表达REST服务的方法
2022/06/10 Servers