效果如下：
说明：
这里我使用的原理是利用vue中的v-show/显示隐藏指令，当为true的时候显示，为false的时候隐藏
1html代码：
<head><meta charset="UTF-8"><base target="_blank"><title>vue实现选项卡切换效果</title><script src="js/jquery-1.8.2.min.js"></script><script src="js/vue.js"></script></head><body><div id="app"><!--主体内容--><div class="center"><!--Tap选项卡部分--><div class="center-left-tap"><a href="javascript:void (0)" style="color: #1c1c1c;" class="current" @click="mt1">最新</a><a href="javascript:void (0)" class="a-hover" @click="mt2">B2C</a><a href="javascript:void (0)" class="a-hover" @click="mt3">C2C</a><a href="javascript:void (0)" class="a-hover" @click="mt4">传统零售</a><a href="javascript:void (0)" class="a-hover" @click="mt5">其他</a></div><div class="container" id="container01"><!--第一个 最新--><div v-for="val in xuan" v-show="a"><div class="con" style=""><div class="center-left-body bg"><div class="img-box1"><img :src="val.img1" alt="" class="img-h b-img"></div><p><a href="detail-1.html" class="center-left-body-a1">{{val.h1}}</a></p><p><a href="detail-1.html" class="center-left-body-a2">{{val.p1}}</a></p><p class="mb-p">{{val.math}}</p><img :src="val.img2" alt="" class="mb-img"><p><a href="" class="tab-mt">{{val.a1}}</a><a href="" class="tab-mt">{{val.a2}}</a></p></div></div></div><!--第二个 B2C--><div class="con" v-show="b"><div class="center-left-body bg"><div class="img-box1"><img src="img-index/1112_154037535.jpg" alt="" class="img-h b-img"></div><p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p><p><a href="detail-1.html"class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p><p class="mb-p">-11-10 16:32</p><img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img"><p><a href="" class="tab-mt">企业服务</a><a href="" class="tab-mt">投融资</a></p></div><div class="center-left-body bg"><div class="img-box1"><img src="img-index/1112_1541985913463.jpg" alt="" class="img-h b-img"></div><p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p><p><a href="detail-1.html"class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p><p class="mb-p">-11-10 16:32</p><img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img"><p><a href="" class="tab-mt">企业服务</a><a href="" class="tab-mt">投融资</a></p></div></div><!--第三个 C2C--><div class="con" v-show="c"><div class="center-left-body bg"><div class="img-box1"><img src="img-index/1107_1541569944473.jpg" alt="" class="img-h b-img"></div><p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p><p><a href="detail-1.html"class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p><p class="mb-p">-11-10 16:32</p><img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img"><p><a href="" class="tab-mt">企业服务</a><a href="" class="tab-mt">投融资</a></p></div><div class="center-left-body bg"><div class="img-box1"><img src="img-index/1107_1541569944473.jpg" alt="" class="img-h b-img"></div><p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p><p><a href="detail-1.html"class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p><p class="mb-p">-11-10 16:32</p><img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img"><p><a href="" class="tab-mt">企业服务</a><a href="" class="tab-mt">投融资</a></p></div><div class="center-left-body bg"><div class="img-box1"><img src="img-index/1112_154837701.jpg" alt="" class="img-h b-img"></div><p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p><p><a href="detail-1.html"class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p><p class="mb-p">-11-10 16:32</p><img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img"><p><a href="" class="tab-mt">企业服务</a><a href="" class="tab-mt">投融资</a></p></div></div><!--第四个 传统零售--><div class="con" v-show="d"><div class="center-left-body bg"><div class="img-box1"><img src="img-index/1113_1542076349985.jpg" alt="" class="img-h b-img"></div><p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p><p><a href="detail-1.html"class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p><p class="mb-p">-11-10 16:32</p><img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img"><p><a href="" class="tab-mt">企业服务</a><a href="" class="tab-mt">投融资</a></p></div><div class="center-left-body bg"><div class="img-box1"><img src="img-index/1113_1542075324144.jpg" alt="" class="img-h b-img"></div><p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p><p><a href="detail-1.html"class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p><p class="mb-p">-11-10 16:32</p><img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img"><p><a href="" class="tab-mt">企业服务</a><a href="" class="tab-mt">投融资</a></p></div><div class="center-left-body bg"><div class="img-box1"><img src="img-index/1112_1542027463929.jpg" alt="" class="img-h b-img"></div><p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p><p><a href="detail-1.html"class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p><p class="mb-p">-11-10 16:32</p><img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img"><p><a href="" class="tab-mt">企业服务</a><a href="" class="tab-mt">投融资</a></p></div><div class="center-left-body bg"><div class="img-box1"><img src="img-index/1107_1541569944473.jpg" alt="" class="img-h b-img"></div><p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p><p><a href="detail-1.html"class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p><p class="mb-p">-11-10 16:32</p><img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img"><p><a href="" class="tab-mt">企业服务</a><a href="" class="tab-mt">投融资</a></p></div></div><!--第五个 其他--><div class="con" v-show="e"><div class="center-left-body bg"><div class="img-box1"><img src="img-index/1113_1542091666106.jpg" alt="" class="img-h b-img"></div><p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p><p><a href="detail-1.html"class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p><p class="mb-p">-11-10 16:32</p><img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img"><p><a href="detail-1.html" class="tab-mt">企业服务</a><a href="detail-1.html" class="tab-mt">投融资</a></p></div><div class="center-left-body bg"><div class="img-box1"><img src="img-index/1113_1542091506167.jpg" alt="" class="img-h b-img"></div><p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p><p><a href="detail-1.html"class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p><p class="mb-p">-11-10 16:32</p><img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img"><p><a href="detail-1.html" class="tab-mt">企业服务</a><a href="detail-1.html" class="tab-mt">投融资</a></p></div><div class="center-left-body bg"><div class="img-box1"><img src="img-index/1113_1542089470929.jpg" alt="" class="img-h b-img"></div><p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p><p><a href="detail-1.html"class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p><p class="mb-p">-11-10 16:32</p><img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img"><p><a href="detail-1.html" class="tab-mt">企业服务</a><a href="detail-1.html" class="tab-mt">投融资</a></p></div><div class="center-left-body bg"><div class="img-box1"><img src="img-index/1107_1541569944473.jpg" alt="" class="img-h b-img"></div><p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p><p><a href="detail-1.html"class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p><p class="mb-p">-11-10 16:32</p><img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img"><p><a href="detail-1.html" class="tab-mt">企业服务</a><a href="detail-1.html" class="tab-mt">投融资</a></p></div><div class="center-left-body bg"><div class="img-box1"><img src="img-index/1112_154037535.jpg" alt="" class="img-h b-img"></div><p><a href="detail-1.html" class="center-left-body-a1">夫妻店再升级 20万小店接入零售通参加双11</a></p><p><a href="detail-1.html"class="center-left-body-a2">据了解，天猫双十一期间，除20万家街边小店外，还有3000家天猫小店也将参与到线下活动中。</a></p><p class="mb-p">-11-10 16:32</p><img src="img-2/ico_pindao_dingyue.png" alt="" class="mb-img"><p><a href="detail-1.html" class="tab-mt">企业服务</a><a href="detail-1.html" class="tab-mt">投融资</a></p></div></div></div></div></div><!--vue 结束--></body>
2css代码：
<style>.center{width: 1160px;margin: 0 auto;}a{text-decoration: none;color: #595959;}a:hover{color: #1a79ff;}/*tap选项卡*/.center-left-tap{height: 58px;}.center-left-tap a{font-size: 16px;color: #999;margin-right: 37px;padding-bottom: 19px;}.a-hover:hover{color: #595959;}/*图文重复内容*/.center-left-body{width: 820px;height: 127px;border-top:1px solid #ddd;margin-top: -15px;padding: 21px 0;margin-bottom: 20px;}.center-left-body img:nth-child(1){width: 190px;height: 127px;float: left;}.center-left-body-a1{float: left;margin-left: 20px;font-size: 18px;line-height: 26px;color: #333;margin-top: -175px;}.center-left-body-a2{float: left;margin-left: 210px;font-size: 16px;color: #595959;margin-top: -95px;word-wrap:break-word;}.mb-p{float: left;margin-top: -20px;margin-left: 210px;color:#999;}.mb-img{float: left;margin-top: -20px;margin-left: 15px;}.tab-mt{margin-right: -30px;margin-left: 50px;margin-top: -20px;float: left;}.bor-no{border: none;}.bg:hover{background-color:#efefef;}</style>
3js：
<script>var vm = new Vue({el: '#app',data: {xuan: [],a: true,b: false,c: false,d: false,e: false,},mounted: function () {this.getData()},methods: {getData() {$.ajax({type: 'get',url: 'frame-1.json',detaType: 'JSON',success: function (data) {vm.xuan = data.xuan}})},// 选项卡mt1: function () {this.a = truethis.b = falsethis.c = falsethis.d = falsethis.e = false},mt2: function () {this.a = falsethis.b = truethis.c = falsethis.d = falsethis.e = false},mt3: function () {this.a = falsethis.b = falsethis.c = truethis.d = falsethis.e = false},mt4: function () {this.a = falsethis.b = falsethis.c = falsethis.d = truethis.e = false},mt5: function () {this.a = falsethis.b = falsethis.c = falsethis.d = falsethis.e = true}}});</script>
应届菜鸟，大佬勿喷...
