vue2.0实现的tab标签切换效果(内容可自定义)示例


Posted in Javascript onFebruary 11, 2019

本文实例讲述了vue2.0实现的tab标签切换效果。分享给大家供大家参考,具体如下:

这里利用vue2.0 实现tab标签切换效果 比较实用

初学vue,练习写了一个demo 网上有很多同样的例子,但都只是改text数据,如果我想加入图片或者复杂的dom结构就不实用,今天这个就刚好可以。

先上代码:

html部分 【记得引入vue文件哦】

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>3water.com vue2.0 实现tab标签切换</title>
  </head>
  <style type="text/css">
    .tab{width: 100px;height: 30px;text-align: center;border: 1px solid #ccc;float: left;line-height: 30px;}
    .on{background: red; color: #fff;}
  </style>
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
  <body>
    <div id="app" v-cloak>
     <!-- 我这判断 下标,是测试使用的,建议大家判断的时候 改成 tab1... 这种-->
        <!-- 而且 我分别用不同的class类名来区别内容是否已更新,大家看的时候,可以查看代码变化-->
         <div class="aa" v-if="avlist==0">aaa内容可以自行修改</div>
         <div class="bb" v-else-if="avlist==1">内容可以自行修改bbb</div>
         <div class="cc" v-else-if="avlist==2">内容可以自行修改ccc</div>
         <div class="dd" v-else-if="avlist==3">内容可以自行修改ddd</div>
       <template v-for="(key,index) in list">
         <div class="tab" :class="{'on':isclass[index]}" @click="handal(index)">{{key}}</div>
       </template>
    </div>
  </body>

js部分

<script>
    var vm = new Vue({
       el:"#app",
       data:{
         list:['tab1','tab2','tab3','tab4'],
         isclass:[true,false,false,false],//用来表示状态,这个可以修改 也可以优化掉
         avlist :0,
       },
       methods:{
         handal:function(a){
           this.avlist=a;
          for(var i=0; i<this.isclass.length; i++){
              this.isclass[i]=false;
              this.isclass[a]=true;
          }
         }
       },
    })
</script>

这样写的好处就是,可以在dom结构中自行定义内容,if判断只是规定了某些内容要不要显示

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码,可得如下运行结果:

vue2.0实现的tab标签切换效果(内容可自定义)示例

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
JS 时间显示效果代码
Aug 23 Javascript
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
Apr 14 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
Jan 22 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 Javascript
使用Script元素发送JSONP请求的方法
Jun 12 Javascript
浅谈JS如何实现真正的对象常量
Jun 25 Javascript
angularJs 表格添加删除修改查询方法
Feb 27 Javascript
JavaScript实现短暂提示框功能
Apr 04 Javascript
微信小程序实现人脸识别登陆的示例代码
Apr 02 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 Javascript
element中table高度自适应的实现
Oct 21 Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 #Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
Feb 11 #Javascript
react配置antd按需加载的使用
Feb 11 #Javascript
react中使用css的7中方式(最全总结)
Feb 11 #Javascript
mpvue+vant app搭建微信小程序的方法步骤
Feb 11 #Javascript
vue自定义指令实现方法详解
Feb 11 #Javascript
Vue表情输入组件 微信face表情组件
Feb 11 #Javascript
You might like
COM in PHP (winows only)
2006/10/09 PHP
PHP MSSQL 存储过程的方法
2008/12/24 PHP
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
PHP自定义函数收代码
2010/08/01 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
jquery 实现的全选和反选
2009/04/15 Javascript
javascript实现图片自动和可控的轮播切换特效
2015/04/13 Javascript
JavaScript对Cookie进行读写操作实例
2015/07/25 Javascript
浅谈Vue 数据响应式原理
2018/05/07 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
2019/10/31 Javascript
微信小程序实现弹框效果
2020/05/26 Javascript
Vue实现简单的拖拽效果
2020/08/25 Javascript
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
在Python下进行UDP网络编程的教程
2015/04/29 Python
Python中方法链的使用方法
2016/02/23 Python
python下调用pytesseract识别某网站验证码的实现方法
2016/06/06 Python
解决python2.7 查询mysql时出现中文乱码
2016/10/09 Python
python中numpy包使用教程之数组和相关操作详解
2017/07/30 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
Python制作exe文件简单流程
2019/01/24 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
python根据文章标题内容自动生成摘要的实例
2019/02/21 Python
django框架使用方法详解
2019/07/18 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
如何使用PyCharm将代码上传到GitHub上(图文详解)
2020/04/27 Python
css3背景_动力节点Java学院整理
2017/07/11 HTML / CSS
美国大城市最热门旅游景点门票:CityPASS
2016/12/16 全球购物
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
VisionPros美国站:加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
成人教育自我鉴定
2013/11/01 职场文书
电子商务专业毕业生工作推荐信
2013/11/17 职场文书
主管会计岗位职责
2014/03/13 职场文书
防沙治沙典型材料
2014/05/07 职场文书
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL