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 相关文章推荐
javascript下有关dom以及xml节点访问兼容问题
Nov 26 Javascript
JavaScript 创建对象和构造类实现代码
Jul 30 Javascript
javaScript 利用闭包模拟对象的私有属性
Dec 29 Javascript
jquery 提交值不为空的元素示例代码
May 10 Javascript
理解javascript中的原型和原型链
Jul 30 Javascript
node.js使用cluster实现多进程
Mar 17 Javascript
JS对象是否拥有某属性如何判断
Feb 03 Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 Javascript
结合mint-ui移动端下拉加载实践方法总结
Nov 08 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
Sep 11 Javascript
React中this丢失的四种解决方法
Mar 12 Javascript
原生JavaScript实现简单五子棋游戏
Jun 28 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 HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
快速解决PHP调用Word组件DCOM权限的问题
2017/12/27 PHP
JavaScript 学习笔记(六)
2009/12/31 Javascript
jquery中.add()的使用分析
2013/04/26 Javascript
A标签触发onclick事件而不跳转的多种解决方法
2013/06/27 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
2014/06/20 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
VUE中v-model和v-for指令详解
2017/06/23 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
2017/08/03 Javascript
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
python基础教程之缩进介绍
2014/08/29 Python
python统计一个文本中重复行数的方法
2014/11/19 Python
python学习数据结构实例代码
2015/05/11 Python
python实现统计代码行数的方法
2015/05/22 Python
python 打印直角三角形,等边三角形,菱形,正方形的代码
2017/11/21 Python
浅谈Python中带_的变量或函数命名
2017/12/04 Python
Python编程在flask中模拟进行Restful的CRUD操作
2018/12/28 Python
Python实现深度遍历和广度遍历的方法
2019/01/22 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
使用 Python 读取电子表格中的数据实例详解
2020/04/17 Python
用python实现一个简单的验证码
2020/12/09 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
英国美发和美容产品商城:HQhair
2019/02/08 全球购物
中学生团员自我评价分享
2013/12/07 职场文书
高中生期末评语大全
2014/01/28 职场文书
会计师职业生涯规划范文
2014/02/18 职场文书
信息总监管理职责范本
2014/03/08 职场文书
竞选班干部的演讲稿
2014/04/24 职场文书
2015年物业公司保洁工作总结
2015/10/22 职场文书
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server