tab切换功能——vue

vue.js 专栏收录该内容
7 篇文章 0 订阅

项目开发中,使用vue实现tab页签切换功能。具体实例如下:

(1)首先定义子组件,如下图:


以select01.vue为例,子组件的源代码如下:

<template>
  <div slot='select01'>{{msg}}</div>
</template>

<script>
export default {
  data(){
    return{
      msg:"select01"
    }
  }
}
</script>

<style lang="scss">

</style>
(2)在app.vue中将子组件引入,通过v-for实现tab页签,通过@click实现页签切换,通过:class实现绑定当前页,tab切换主要依靠组件component实现,每个页签切换时,不想让改变页签内容,可以用keep-alive实现。具体代码如下:
<template>
  <div id="app">
    <div class="radio-wrap">
      <div class="radio-group" v-model="tabView"> 
        <span v-for="(tab ,index) in tabs" :class="{cur:iscur==index}" @click="iscur=index,tabChange('select' + (index + 1))">{{tab.name}}</span>
      </div>
      <div style="margin:10px 0;"></div>
      <keep-alive> 
        <component v-bind:is="tabView"></component>
      </keep-alive> 
    </div>
  </div>
</template>

<script>
  import select1 from './components/select01.vue';
  import select2 from './components/select02.vue';
  import select3 from './components/select03.vue';
export default {
  name: 'app',
  data () {
    return {
      tabView: 'select1',
      tabs: [{name: "选项一"}, {name: "选项二"} ,{name: "选项三"}],
      iscur: 0
    }
  },
  components: {
    select1,
    select2,
    select3
  },
  methods: {
    tabChange:function(tab){
      this.tabView = tab;
    }
  }
}
</script>

<style>
  .radio-group{font-size:0;height: 26px;line-height:26px;}
  .radio-group>span{cursor:pointer;display:inline-block;font-size:16px;text-align:center;width:100px;}
  .cur{color:#fff;background-color: #20a0ff;}
</style>
(3)功能效果如下:



  • 3
    点赞
  • 10
    评论
  • 4
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值