Vue.js组件tab实现选项卡切换


Posted in Javascript onMarch 23, 2020

本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下

效果图:

Vue.js组件tab实现选项卡切换

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
 *{padding: 0;margin: 0}
 #app{
 width: 500px;height: 300px;margin: 0 auto;background-color: #ddd;
 }
 .top{
 height: 50px;line-height: 50px;width: 100%;background-color: #999;
 }
 .top ul li{display: inline-block;margin:0 10px;}
 .top ul li a{text-decoration: none;color: white;}
 .bottom{

 }
 </style>
</head>
<body>
 <div id="app">
 <div class="top">
 <ul>
 <li><a href="javascript:;" @click='tabToggle(tab01Text);'>{{tab01Text}}</a></li>
 <li><a href="javascript:;" @click='tabToggle(tab02Text);'>{{tab02Text}}</a></li>
 <li><a href="javascript:;" @click='tabToggle(tab03Text);'>{{tab03Text}}</a></li>
 </ul>
 </div>
 <div class="bottom">
 <component :is='currentView' keep-alive></component>
 </div>
 </div>
 <script type="text/javascript" src='vue.js'></script>
 <script>
 var tab01 = Vue.extend({
 template:'<p>This is tab01</p>'
 })
 var tab02 = Vue.extend({
 template:'<p>This is tab02</p>'
 })
 var tab03 = Vue.extend({
 template:'<p>This is tab03</p>'
 })
 var app = new Vue({
 el:'#app',
 data:{
 tab01Text:'tab01',
 tab02Text:'tab02',
 tab03Text:'tab03',
 currentView:'tab01'
 },
 components:{
 tab01:tab01,
 tab02:tab02,
 tab03:tab03
 },
 methods:{
 tabToggle:function(tabText){
 this.currentView=tabText
 }
 }
 })
 </script>
</body>
</html>

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript eval和JSON之间的联系
Dec 31 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
Sep 10 Javascript
JS实现的颜色实时渐变效果完整实例
Mar 25 Javascript
两行代码轻松搞定JavaScript日期验证
Aug 03 Javascript
Node.js connect ECONNREFUSED错误解决办法
Sep 15 Javascript
JavaScript中的ajax功能的概念和示例详解
Oct 17 Javascript
Javascript使用function创建类的两种方法(推荐)
Nov 19 Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 Javascript
关于Node.js的events.EventEmitter用法介绍
Apr 01 Javascript
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
Oct 15 Javascript
python实现迭代法求方程组的根过程解析
Nov 25 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 #Javascript
完美实现js选项卡切换效果(一)
Mar 08 #Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 #Javascript
原生JS仿QQ阅读点击展开、收起效果
Mar 08 #Javascript
jQuery插件zTree实现删除树子节点的方法示例
Mar 08 #Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 #Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
Mar 08 #Javascript
You might like
Android App中DrawerLayout抽屉效果的菜单编写实例
2016/03/21 PHP
仅img元素创建后不添加到文档中会执行onload事件的解决方法
2011/07/31 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
jQuery+css+html实现页面遮罩弹出框
2013/03/21 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
2015/08/07 Javascript
AngularJS入门教程之AngularJS 模板
2016/08/18 Javascript
JavaScript字符串对象(string)基本用法示例
2017/01/18 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
2017/12/05 Javascript
基于JavaScript实现抽奖系统
2018/01/16 Javascript
js中DOM事件绑定分析
2018/03/18 Javascript
在小程序中使用canvas的方法示例
2018/09/17 Javascript
解决vue动态为数据添加新属性遇到的问题
2018/09/18 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
python 读入多行数据的实例
2018/04/19 Python
Python3实现的简单三级菜单功能示例
2019/03/12 Python
关于keras中keras.layers.merge的用法说明
2020/05/23 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
澳大利亚新奇小玩意网站:Yellow Octopus
2017/12/28 全球购物
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
渗透攻击的测试步骤
2014/06/07 面试题
经济系大学生求职信
2013/10/01 职场文书
毕业生机械建模求职信
2013/10/14 职场文书
应届生的求职推荐信范文
2013/11/30 职场文书
三好学生自我鉴定
2013/12/17 职场文书
会计专业自我鉴定范文
2013/12/29 职场文书
百年校庆节目主持词
2014/03/27 职场文书
个人合作协议书范本
2014/04/18 职场文书
人力资源管理专业自荐书
2014/07/07 职场文书
先进事迹演讲稿
2014/09/01 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python