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 相关文章推荐
读jQuery之二(两种扩展)
Jun 11 Javascript
jQuery实现图片放大预览实现原理及代码
Sep 12 Javascript
jquery使用$(element).is()来判断获取的tagName
Aug 24 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
Mar 21 Javascript
前端页面文件拖拽上传模块js代码示例
May 19 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
Jul 25 Javascript
JavaScript中变量、指针和引用功能与操作示例
Aug 04 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 Javascript
vue实现行列转换的一种方法
Aug 06 Javascript
如何优雅地在Node应用中进行错误异常处理
Nov 25 Javascript
vue 出现data-v-xxx的原因及解决
Aug 04 Javascript
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
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下MAIL的另一解决方案
2006/10/09 PHP
PHP mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
phpize的深入理解
2013/06/03 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
php轻松实现文件上传功能
2016/03/03 PHP
如何打开php的gd2库
2017/02/09 PHP
详解yii2使用多个数据库的案例
2017/06/16 PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
jQuery timers计时器简单应用说明
2010/10/28 Javascript
Javascript中With语句用法实例
2015/05/14 Javascript
不得不分享的JavaScript常用方法函数集(上)
2015/12/23 Javascript
jQuery EasyUI菜单与按钮详解
2016/07/13 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
2016/12/27 Javascript
AngularJS改变元素显示状态
2017/04/20 Javascript
input type=file 选择图片并且实现预览效果的实例
2017/10/26 Javascript
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
node错误处理与日志记录的实现
2018/12/24 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
js实现计算器功能
2020/08/10 Javascript
[56:24]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第二局
2016/03/04 DOTA
[05:00]TI9战队采访 - Royal Never Give Up
2019/08/20 DOTA
Python中二维列表如何获取子区域元素的组成
2017/01/19 Python
基于django channel实现websocket的聊天室的方法示例
2019/04/11 Python
Python 使用PyQt5 完成选择文件或目录的对话框方法
2019/06/27 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
Python算法中的时间复杂度问题
2019/11/19 Python
Python3 搭建Qt5 环境的方法示例
2020/07/16 Python
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
怎样从/向数据文件读/写结构
2014/11/23 面试题
个人先进事迹材料
2014/12/29 职场文书
2015年八一建军节演讲稿
2015/03/19 职场文书
2015年安全生产月活动总结
2015/03/26 职场文书