精华内容
下载资源
问答
  • 主要介绍了详解使用vue实现tab操作,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 下面小编就为大家分享一篇vue实现tab切换外加样式切换方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了vue 实现tab切换保持数据状态,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 在项目开发中遇到这样需求,就是有几个tab栏,每个tab栏对应的ajax请求不一样,内容区域一样,内容为实时刷新数据,实现方法其实很简单的,下面小编给大家带来了基于Vue实现tab切换内容不断实时刷新数据功能,需要...
  • VUE实现Tab切换

    千次阅读 2019-05-27 02:46:12
    VUE实现Tab切换方式,需要用到以下知识点:1、动态绑定class,用于导航高亮显示:class="{active:cur==0}"复制代码2、click点击事件,用于改变当前cur的值@click="cur=0"复制代码3、使用v-show="cur==0",用于判断...

    VUE中实现Tab切换方式,需要用到以下知识点:

    1、动态绑定class,用于导航高亮显示

    :class="{active:cur==0}"复制代码

    2、click点击事件,用于改变当前cur的值

    @click="cur=0"复制代码

    3、使用v-show="cur==0",用于判断当前cur的值为0时,显示,也就是点击那个导航,改变cur的值,对应的内容也将显示出来。


    Tab导航部分内容:

    <ul>
        <li @click="cur=0" :class="{active:cur==0}" ><span>全部</span></li>
        <li @click="cur=1" :class="{active:cur==1}" ><span>好评</span></li>
        <li @click="cur=2" :class="{active:cur==2}" ><span>差评</span></li>
    </ul>复制代码

    在data中定义默认值cur=0

    data(){
        return{
            cur:0,
        }
    }复制代码

    对应显示的内容:

    <div class="show">
        <ul class="topnav-show" v-show="cur==0">
            <li>内容1</li>
        </ul>
        <ul class="topnav-show" v-show="cur==1">
            <li>内容2</li>
        </ul>
        <ul class="topnav-show" v-show="cur==2">
            <li>内容3</li>
        </ul>
    </div>复制代码

    以上代码可以理解为,当我点击好评时,cur的值=1,动态class将绑定好评高亮显示,对应show部分,内容2将显示。


    展开全文
  • Vue实现Tab切换

    2020-05-22 14:57:56
    Tab切换 - 点击之后更改索引:v-on:click='change(index) 颜色变化 v-bind:class='currentIndex==index?"active":""',active是css里的类。 图片显示:v-bind:class=‘currentIndex==index?“current”:""’,和...

    Tab切换
    在这里插入图片描述 - 点击之后更改索引:v-on:click='change(index)

    • 颜色变化 v-bind:class='currentIndex==index?"active":""',active是css里的类。
    • 图片显示:v-bind:class=‘currentIndex==index?“current”:""’,和当前索引相等的设置为block属性。
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style type="text/css">
        
        .tab ul {
          overflow: hidden;
          padding: 0;
          margin: 0;
        }
        .tab ul li {
          box-sizing: border-box;
          padding: 0;
          float: left;
          width: 100px;
          height: 45px;
          line-height: 45px;
          list-style: none;
          text-align: center;
          border-top: 1px solid blue;
          border-right: 1px solid blue;
          cursor
        }
        .tab ul li:first-child {
          border-left: 1px solid blue;
        }
        .tab ul li.active {
          background-color: orange;
        }
        .tab div {
          width: 500px;
          height: 300px;
          display: none;
          text-align: center;
          font-size: 30px;
          line-height: 300px;
          border: 1px solid blue;
          border-top: 0px;
        }
        .tab div.current {
          display: block;
        }
      </style>
    </head>
    <body>
      <div id="app">
        <div class="tab">
          <ul>
            <li v-on:click='change(index)' v-bind:class='currentIndex==index?"active":""' :key='item.id' v-for='(item,index) in list'>{{item.title}}</li>
          </ul>
          <div v-bind:class='currentIndex==index?"current":""' :key='item.id' v-for='(item, index) in list'>
            <img bind:src="item.path">
          </div>
        </div>
      </div>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        /*
          
        */
        var vm = new Vue({
          el: '#app',
          data: {
            currentIndex: 0, // 选项卡当前的索引
            list: [{
              id: 1,
              title: 'apple',
              path: 'img/apple.png'
            },{
              id: 2,
              title: 'orange',
              path: 'img/orange.png'
            },{
              id: 3,
              title: 'lemon',
              path: 'img/lemon.png'
            }]
          },
          methods: {
            change: function(index){
              // 在这里实现选项卡切换操作:本质就是操作类名
              // 如何操作类名?就是通过currentIndex
              this.currentIndex = index;
            }
          }
        });
      </script>
    </body>
    </html>
    
    展开全文
  • vue实现tab切换功能的几种方法

    千次阅读 2019-10-17 11:17:26
    vue实现tab切换功能的几种方法 1.组件切换 利用vue里的 :is属性和keep-alive缓存 效果图 代码 <template> <div> <div class="tab"> <ul class="tab_button"> <li v-for="...

    vue实现tab切换功能的几种方法

    1.组件切换

    利用vue里的 :is属性和keep-alive缓存

    效果图
    第一个tab
    第二个
    代码

    <template>
      <div>
          <div class="tab">
            <ul class="tab_button">
                <li 
    	            v-for="(item,index) in tabList"    // 循环语句写tab按钮
    	            :key="index" 
    	            :class="{active:currentClass==index}"   // 设置选中按钮的样式
    	            @click="toggleTab(item.tab_con,index)"  //  点击切换tab,传参绑定选中tab的样式和内容
                >
                {{item.title}}  // 按钮的文字
                </li>
            </ul>
        </div>
        <div class="tab_con">
            <keep-alive>   // keep-alive 内容会被缓存,不会一直渲染dom元素
                <firstTab :is="currentTab"></firstTab>   // is绑定选中tab的内容
            </keep-alive>
        </div>
      </div>
    </template>
    
    <script>
    //  引入三个tab内容组件
    import firstTab from './firstTab'
    import secondTab from './secondTab'
    import thirdTab from './thirdTab' 
    
    export default {
    	name: 'Home',
    	props: {},
    	data() {
    	    return {
    	        currentTab: 'firstTab',  // 默认选中tab
    	        currentClass: 0,  // 默认选中按钮样式
    	        tabList:[
    	            {
    	                title: 'firstTab',  // tab文字
    	                tab_con: 'firstTab'  // tab对应内容块
    	            },
    	            {
    	                title: 'secondTab',
    	                tab_con: 'secondTab'
    	            },
    	            {
    	                title: 'thirdTab',
    	                tab_con: 'thirdTab'
    	            }
    	        ]
    	    };
    	},
    	methods: {
    	    toggleTab(tab_con,currentClass){
    	        this.currentTab = tab_con;  // 选中tab内容块展示
    	        this.currentClass = currentClass;  // 选中tab样式
    	    }
    	},
    	components: {
    		firstTab,
    		secondTab,
    		thirdTab
    	},
    }
    </script>
    <style scoped>
    .tab_button li{width: 220px; height: 84px; border: 1px solid #999; cursor: pointer; display: inline-block; margin-left: 24px; border-radius: 8px; font: bold 24px/84px 'Microsoft Yahei'; color: #333; text-align: center;}
    .tab_button li.active{ border: 1px solid #f3ae19; color: #f3ae19}  // 选中tab 样式
    </style>
    
    

    2.v-show 控制内容切换

    和组件切换原理类似,适合tab内容少,可以直接放在同一个页面
    <template>
      <div>
          <div class="tab">
            <ul class="tab_button">
                <li 
    	            v-for="(item,index) in tabList" 
    	            :key="index" 
    	            :class="{active:currentClass==index}" 
    	            @click="toggleTab(index)"  // 只传一个参数用来控制选中tab的样式以及选中tab对应内容块的显示
                >{{item}}</li>
            </ul>
        </div>
        <div>  // 三个tab对应内容块
            <div class="tab_con" v-show="currentTab==0">
                firstTab
            </div>
            <div class="tab_con" v-show="currentTab==1">
                secondTab
            </div>
            <div class="tab_con" v-show="currentTab==2">
                thirdTab
            </div>
        </div>
      </div>
    </template>
    
    <script>
    
    export default {
    name: 'Home',
    props: {},
    data() {
        return {
            currentTab: 0,
            currentClass: 0,
            tabList:[ 'firstTab', 'secondTab', 'thirdTab']
        };
    },
    methods: {
        toggleTab(current){
            this.currentTab = current;
            this.currentClass = current;
        }
    }
    }
    </script>
    <style scoped>
    .tab_button li{width: 220px; height: 84px; border: 1px solid #999; background: transparent; cursor: pointer; display: inline-block; margin-left: 24px; border-radius: 8px;
    font: bold 24px/84px 'Microsoft Yahei'; color: #333; text-align: center;}
    .tab_button li.active{ border: 1px solid #f3ae19; color: #f3ae19}
    .tab_con{ width: 714px; height: 400px; background: #ccc; color: #333; margin-left: 64px; font-size: 64px; text-align: center; line-height: 400px;}
    </style>
    
    

    3.路由切换

    通过router-link实现,对地址栏和数据请求友好,但是tab按钮和内容块不在一个页面,需要跳转

    tab页面
    跳转第一个页面
    要定义路由
    路由
    代码

    <template>
      <div>
          <div class="tab">
            <router-link to="firstTab" class="router-link">firstTab</router-link>
            <router-link to="secondTab" class="router-link">secondTab</router-link>
            <router-link to="thirdTab" class="router-link">thirdTab</router-link>
        </div>
      </div>
    </template>
    
    <script>
    
    export default {
        name: 'Home',
    }
    </script>
    <style scoped>
    .router-link{width: 220px; height: 84px; border: 1px solid #999; background: transparent; cursor: pointer; display: inline-block; margin-left: 24px; border-radius: 8px;
    font: bold 24px/84px 'Microsoft Yahei'; text-align: center; text-decoration: none; color: #333; }
    </style>
    
    
    展开全文
  • vue实现tab切换附带css样式 vue会用到tab切换的地方 很简单 几句代码实现可复用 直接上代码 我是写在html页面中的 1.代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &...

    vue实现tab切换附带css样式

    vue会用到tab切换的地方 很简单 几句代码实现可复用 直接上代码 我是写在html页面中的

    1.代码

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>tab切换</title>
    		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    		<style>
    			#app {
    				width: 800px;
    				height: 500px;
    				margin: 50px auto;
    			}
    
    			/*  tab样式 */
    			.tab_nav {
    				display: flex;
    				justify-content: center;
    				align-items: center;
    				margin-bottom: 10px;
    			}
    
    			.tab_nav .navTitle {
    				height: 90px;
    				line-height: 90px;
    				width: 100%;
    				text-align: center;
    				font-size: 16px;
    				font-family: Alibaba PuHuiTi;
    				color: #333;
    				background-color: #DB7093;
    				margin-right: 10px;
    			}
    			
    			/* 让最后一个标题没有margin */
    			.navTitle:last-child {
    				margin-right: 0;
    			}
    
    			.active {
    				position: relative;
    				color: #FFFFFF;
    			}
    
    			.active::after {
    				content: "";
    				position: absolute;
    				width: 100rpx;
    				height: 4rpx;
    				background-color: #1F75FE;
    				left: 0px;
    				right: 0px;
    				bottom: 0px;
    				margin: auto;
    			}
    			
    			.nav_item{
    				padding: 20px;
    				background-color: rgb(211 206 206);
    				color: #FFFFFF;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="app">
    			<!-- 标题 -->
    			<div class="tab_nav">
    				<div class="navTitle" v-for="(item,index) in navList" :key="index">
    					<div :class="{'active':isActive === index}" @click="checked(index)">{{item.title}}</div>
    				</div>
    			</div>
    
    			<!-- 内容块 -->
    			<div class="nav_item" v-if="isActive==0">第一块内容</div>
    			<div class="nav_item" v-if="isActive==1">第二块内容</div>
    		</div>
    
    		<script type="text/javascript">
    			let app = new Vue({
    				el: '#app',
    				data: {
    					isActive: 0,
    					navList: [{
    							index: 0,
    							title: '第一块'
    						},
    						{
    							index: 1,
    							title: "第二块"
    						}
    					],
    				},
    
    				methods: {
    					//  tab事件
    					checked(index) {
    						const _this = this
    						_this.isActive = index
    					},
    				},
    			});
    		</script>
    	</body>
    </html>
    
    

    2.效果图 点击对应的标题就可以切换内容
    在这里插入图片描述
    在这里插入图片描述

    如果帮到你就给我点个赞和关注吧
    
    展开全文
  • Vue实现Tab切换效果

    2020-09-24 13:55:00
    通过Vue实现简单的Tab切换 实现思路是点击上方的标题,下方的内容随之发生改变,上方和下方用的是两个块,是兄弟节点,所以需要点击tab标题和下方内容一一对应,基予两个模块若下标相同是一个内容实现的。 Tab切换...
  • vue实现Tab切换功能

    千次阅读 2019-11-01 15:56:02
    在项目开发中,我们经常会碰到Tab切换的功能,而在Vue中想实现这样的功能也应该有很多种,常用的三种应该是 Tab路由切换、Tab动态组件切换、通过v-show设置Tab显示隐藏。每种方法实现起来其实都不难,看看官网介绍或...
  • 163邮箱登录tab切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> ul li { list-style: none; display: inline-block; border: 1px solid ...
  • vue实现tab切换案例

    2019-11-28 08:46:38
    结构: <div class="statisticsNav"&...div :class="{'selected':tab === 1,'statisticsTitle':true}" @click="toTab(1)">空间统计</div> <div :class="{'selected':tab === 2,'statisticsTitle':t...
  • vue实现tab切换样式

    千次阅读 2018-12-04 14:30:46
    现成的vue移动端 点击tab 切换样式功能。需要的拿去根据自己的需求改一下样式  &lt;template&gt; &lt;div class="container"&gt; &lt;ul class="tab-list"&gt; &...
  • Vue.js实现tab切换效果

    2020-10-16 15:56:59
    主要为大家详细介绍了Vue.js实现tab切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 首先切换左侧tab需要一个变量来控制他们的状态,其次,切换右侧列表内容的状态(题干要求其他子项并不受当前子项状态的影响控制,说明控制他们的状态的变量是互不影响的)需要列表长度个状态。左侧的tab数量×右侧...
  • vue实现tab切换

    2019-01-26 11:41:28
    这是基于vue-cli实现的  利用v-for循环遍历tabItems,class绑定到当前点击的tab项,&lt;router-link :to=item.tab&gt;{{item.name}}&lt;/router-link&gt;表示点击之后要跳转的路径(相当于每个tab...
  • vue实现tab切换外加样式切换

    千次阅读 2017-06-30 16:36:07
    "iscur = index,tab('text'+(index+1))" > {{num.t}} li > ul > < div class= "box" > < component :is= 'currentView' keep-alive > component > div > div > < script src= "vue.js" > ...
  • 主要为大家详细介绍了vue滚动tab跟随切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • ##vue实现tab切换+模糊搜索+轮播联动 <template> <div class="grade_menu"> <div class="grade_menu_top"> <div class="grade_menu_tab"> //tab切换标签 <div class="tab_item" v...
  • vue 实现tab切换动态加载不同的组件

    千次阅读 2018-04-05 12:25:00
    vue 实现tab切换动态加载不同的组件 使用vue中的is特性来加载不同的组件。具体看如下代码;这个功能对于vue比较复杂的页面可以使用上,可以把一个页面的功能拆分出来,使代码更简单。使用方式具体看如下代码: 主...
  • Vue实现tab切换 表单验证及提交

    千次阅读 2020-10-21 19:26:26
    <!... <... <head> ...meta charset="utf-8">...script src="../../js/vue.min.js"></script> <style type="text/css"> li {list-style: none} .nav li {float: left;b...
  • 主要介绍了基于vue-cli 路由 实现类似tab切换效果(vue 2.0),非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下
  • vue实现tab切换效果

    2020-11-06 09:53:07
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tabs</title> <style> .active{ background: #eee; } .tabs{ width: 200px;...
  • 1.顶部tab切换 需求: 1-1添加默认值 1-2二级属性的动态样式 思路: V-model ,实现默认值; 将二级菜系作为路由,点击时传参,并判断是否对应从而,实现动态样式的切换; 解决办法: activeName: ‘1’,//切换卡,默认为第一...
  • vuetab切换的三种实现方式。

    万次阅读 多人点赞 2019-05-11 17:49:10
    vuetab切换一、v-show控制 一、v-show控制 1.简单版原理:用点击事件改变num值作为开关,控制tab样式和内容显示隐藏。 2.数据渲染原理:主要利用v-for绑定的index来控制,跟上面差不多。 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,100
精华内容 4,440
关键字:

vue实现tab切换

vue 订阅