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 相关文章推荐
jquery.cvtooltip.js 基于jquery的气泡提示插件
Nov 19 Javascript
JsDom 编程小结
Aug 09 Javascript
基于jquery的web页面日期格式化插件
Nov 15 Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 Javascript
浅谈Webpack核心模块tapable解析
Sep 11 Javascript
vue-cli项目修改文件热重载失效的解决方法
Sep 19 Javascript
vue3.0中使用postcss-pxtorem的具体方法
Nov 20 Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
微信小程序自定义联系人弹窗
May 26 Javascript
微信小程序中的列表切换功能实例代码详解
Jun 09 Javascript
Threejs实现滴滴官网首页地球动画功能
Jul 13 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
php中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
php中使用Ajax时出现Error(c00ce56e)的详细解决方案
2014/11/03 PHP
php 静态属性和静态方法区别详解
2017/04/09 PHP
php微信开发之关注事件
2018/06/14 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
没有document.getElementByName方法
2013/08/19 Javascript
Javascript中Event属性搜集整理
2013/09/17 Javascript
JS的参数传递示例介绍
2014/02/08 Javascript
Jquery实现仿腾讯微博发表广播
2014/11/17 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
基于node实现websocket协议
2016/04/25 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
2019/09/17 Javascript
vue-cli创建的项目中的gitHooks原理解析
2020/02/14 Javascript
openlayers4实现点动态扩散
2020/08/17 Javascript
Python的Socket编程过程中实现UDP端口复用的实例分享
2016/03/19 Python
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
python 从list中随机取值的方法
2020/11/16 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
html Table 表头固定的实现
2019/01/22 HTML / CSS
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
总裁秘书岗位职责
2013/12/04 职场文书
人力资源部经理岗位职责规定
2014/02/23 职场文书
爱护草坪标语
2014/06/24 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
实习介绍信模板
2015/01/30 职场文书
家装业务员岗位职责
2015/04/03 职场文书
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis
Python Flask搭建yolov3目标检测系统详解流程
2021/11/07 Python