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 相关文章推荐
IE与firefox下Dhtml的一些区别小结
Dec 02 Javascript
jquery的map与get方法详解
Nov 04 Javascript
一个简单的jQuery计算器实现了连续计算功能
Jul 21 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
Angular 中 select指令用法详解
Sep 29 Javascript
javascript实现动态显示颜色块的报表效果
Apr 10 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
May 15 Javascript
js链表操作(实例讲解)
Aug 29 Javascript
使用rollup打包JS的方法步骤
Dec 05 Javascript
Vue 3.0双向绑定原理的实现方法
Oct 23 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
Aug 07 Javascript
vue 防止页面加载时看到花括号的解决操作
Nov 09 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
php中理解print EOT分界符和echo EOT的用法区别小结
2010/02/21 PHP
php中hashtable实现示例分享
2014/02/13 PHP
Laravel 5 框架入门(四)完结篇
2015/04/09 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
Laravel 实现数据软删除功能
2019/08/21 PHP
jQuery 1.0.4 - New Wave Javascript(js源文件)
2007/01/15 Javascript
JS window.opener返回父页面的应用
2009/10/24 Javascript
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
js下通过prototype扩展实现indexOf的代码
2010/12/08 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
JS获取计算机mac地址以及IP的实现方法
2014/01/08 Javascript
node.js中的http.createServer方法使用说明
2014/12/14 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
javascript中获取class的简单实现
2016/07/12 Javascript
vuex actions异步修改状态的实例详解
2019/11/06 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
[55:56]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
python自动截取需要区域,进行图像识别的方法
2018/05/17 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
使用python批量化音乐文件格式转换的实例
2019/01/09 Python
20行python代码的入门级小游戏的详解
2019/05/05 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
Python通过正则库爬取淘宝商品信息代码实例
2020/03/02 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
python list的index()和find()的实现
2020/11/16 Python
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
方太官方网上商城:销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
美国复古街头服饰精品店:Need Supply Co.
2017/02/22 全球购物
伯利陶器:Burleigh Pottery
2018/01/03 全球购物
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
应届毕业生就业自荐信
2013/10/26 职场文书
综合内勤岗位职责
2014/04/14 职场文书