Vue.js，jquery 实现tabe切换

最新推荐文章于 2022-06-15 11:38:27 发布

转载最新推荐文章于 2022-06-15 11:38:27 发布 · 176 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000010590617

文章标签：

#前端 #javascript #ViewUI

本文介绍如何使用 Vue.js 实现 Tab 切换功能，包括通过 v-if 和 v-bind:class 控制显示隐藏及样式变化，适用于前端开发人员学习。

table切换在各个网页中经常用到，平常用jQuery比较容易实现，使用jQuery中的siblings选择其余同胞元素，为了加深记忆顺便把jQuery的代码贴一下。

    <div id="tit">
        <span class="select">标题1</span>
        <span>标题2</span>
        <span>标题3</span>
    </div>
    <ul id="con">
        <li class="show">内容111</li>
        <li>内容222</li>
        <li>内容333</li>
    </ul>

  $('#tit span').click(function() {
            var i = $(this).index();//下标第一种写法
            //var i = $('tit').index(this);//下标第二种写法
            $(this).addClass('select').siblings().removeClass('select');
            $('#con li').eq(i).show().siblings().hide();
        });

上面的代码我是百度来的，实现方法也比较多，作为一个前端小白刚开始使用vue写感觉好难过，大家不要嫌弃我蠢

<h4 ref="all" @click="all">全部</h4>
<h4 ref="product" @click="product">商品</h4>
<h4 ref="news" @click="news">新闻</h4>

我用vue直接来操作DOM虽然可以实现，但我自己都觉得有些蠢，然后我百度了一下，果然大神就是给力，

<div id="app">
    <div>
        <button v-for="(ind,key,index) in btn" v-bind:class="{active:(indexs==index)}"
         v-on:click="a(index)">{{ind}}</button>
         //这段代码通过indexs==index的值来判断active类，通过a方法来决定indexs 的值 反正以我的水平是写不出来的
    </div>
    <div class="wrap">
        <div v-for="(w,key,index) in box" v-if="indexs == index">{{w}}</div>
    </div>
</div>

<script type="text/javascript">
  var app = new Vue({
    el:"#app",
    data:{
        btn:{a:"按钮1",b:"按钮2",c:"按钮3"},
        box:{aa:"tab切换1",bb:"tab切换2",cc:"tab切换3"},
        indexs:0,
        a:function(str){
            this.indexs=str;
        }
    }
    })
</script>

.wrap div{
        width: 300px;
        height: 300px;
        background-color: #0cc;
    }
.active{
    background-color: red
}

上面代码来自池剑锋使用vue实现tab切换例子

他的代码中内容部分来自box中的数据，为了让内容部分更加灵活，我又想到了一个比较笨的方法

 <div class="wrap">
     <div  v-if="indexs == 0">fhgfdshdf</div>
     <div  v-if="indexs == 1">sdfsdfsfsfsdfdsfffffffff</div>
     <div  v-if="indexs == 2">dsfdfgdfgdfgdfAAAAAAAAAAAA</div>
 </div>

这样就可以直接在内容部分随意编辑了，不知道各位大神还有没有更好的方法欢迎大家指教
本文旨在自己归纳学习，写的不好请大家见谅