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,实现插入排序实现代码
Jul 31 Javascript
javascript管中窥豹 形参与实参浅析
Dec 17 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
Oct 15 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
May 12 Javascript
JavaScript简单下拉菜单实例代码
Sep 07 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
May 10 Javascript
angularjs之$timeout指令详解
Jun 13 Javascript
详解用Node.js写一个简单的命令行工具
Mar 01 Javascript
浅谈Angular6的服务和依赖注入
Jun 27 Javascript
实例讲解v-if和v-show的区别
Jan 31 Javascript
微信小程序实现单选选项卡切换效果
Jun 19 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
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 创建文件(文件夹)以及目录操作代码
2010/03/04 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
Laravel 实现关系模型取出需要的字段
2019/10/10 PHP
document.write()及其输出内容的样式、位置控制
2013/08/12 Javascript
jquery如何判断某元素是否具备指定的样式
2013/11/05 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
JavaScript实现控制打开文件另存为对话框的方法
2015/04/17 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
jQuery使用正则表达式限制文本框只能输入数字
2016/06/18 Javascript
微信小程序组件 marquee实例详解
2017/06/23 Javascript
Vue实现内部组件轮播切换效果的示例代码
2018/04/07 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
Vue CLI3基础学习之pages构建多页应用
2019/06/02 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
JavaScript判断数组类型的方法
2019/10/23 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
python备份文件的脚本
2008/08/11 Python
Python argv用法详解
2016/01/08 Python
Python实现简单登录验证
2016/04/13 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
Pytorch的mean和std调查实例
2020/01/02 Python
Python virtualenv虚拟环境实现过程解析
2020/04/18 Python
如何使用 Python 读取文件和照片的创建日期
2020/09/05 Python
python模块内置属性概念及实例
2021/02/18 Python
HTML5中form如何关闭自动完成功能的方法
2018/07/02 HTML / CSS
美国最大的网络男装服装品牌:Bonobos
2017/05/25 全球购物
中科软测试工程师面试题
2012/06/16 面试题
《庐山的云雾》教学反思
2014/04/22 职场文书
十八大宣传标语
2014/10/09 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP