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 基础学习笔记
May 29 Javascript
var与Javascript变量隐式声明
Sep 17 Javascript
改写一个简单的菜单 弹性大小
Dec 02 Javascript
js使用函数绑定技术改变事件处理程序的作用域
Dec 26 Javascript
Js参数值中含有单引号或双引号问题的解决方法
Nov 06 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
Apr 01 Javascript
基于angularjs实现图片放大镜效果
Aug 31 Javascript
使用node打造自己的命令行工具方法教程
Mar 26 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
Aug 12 Javascript
JS removeAttribute()方法实现删除元素的某个属性
Jan 11 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
将兴奋、喜悦和坎加斯带到戴安娜:亚马逊公主
2020/03/03 欧美动漫
php使用fsockopen函数发送post,get请求获取网页内容的方法
2014/11/15 PHP
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
JQuery的ajax基础上的超强GridView展示
2009/09/18 Javascript
javascript 隔行换色函数代码
2010/10/24 Javascript
jquery按回车提交数据的代码示例
2013/11/05 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
Javascript编写2048小游戏
2015/07/07 Javascript
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
vue组件实例解析
2017/01/10 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
2017/02/22 Javascript
Bootstrap 网格系统布局详解
2017/03/19 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
2018/08/24 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
JS左右无缝轮播功能完整实例
2019/05/16 Javascript
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
vue 遮罩层阻止默认滚动事件操作
2020/07/28 Javascript
python为tornado添加recaptcha验证码功能
2014/02/26 Python
详解Python中find()方法的使用
2015/05/18 Python
Python PyQt4实现QQ抽屉效果
2018/04/20 Python
如何在Django配置文件里配置session链接
2019/08/06 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
自考生自我鉴定范文
2013/10/01 职场文书
25岁生日感言
2014/01/13 职场文书
综合内勤岗位职责
2014/04/14 职场文书
村长党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
授权委托书协议书
2014/10/16 职场文书
2015年护士工作总结范文
2015/03/31 职场文书
在Django中使用MQTT的方法
2021/05/10 Python
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript