tab切换功能——vue

项目开发中,使用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)功能效果如下:



### 实现Vue Tab切换并清空面内容 在Vue框架中实现Tab切换时,为了确保每次切换都能清空对应面的内容,可以采用多种策略。一种有效的方法是利用`<keep-alive>`配合`:include`属性控制缓存特定组件,并结合监听事件或生命周期钩子函数来重置数据。 对于希望彻底清除某个Tab内的所有状态而不只是隐藏元素来说,在激活新的Tab之前销毁当前活动实例是一个不错的选择[^2]: ```html <!-- 使用 include 属性指定要缓存的视图 --> <keep-alive :include="cachedViews"> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <!-- 不被 keep-alive 缓存的 view --> <router-view v-if="!$route.meta.keepAlive"></router-view> ``` 当需要更新或者移除某些已打开标的状态时,可以通过改变`cachedViews`数组中的值达到目的;而针对具体某一内部的数据清理,则可以在其对应的组件里定义一个方法用于初始化data对象里的字段,再于父级组件调用此方法完成操作[^3]。 此外,还可以考虑使用`key`特性强制重新渲染组件从而触发创建周期,这同样有助于解决表单项残留的问题。每当路径参数发生变动或是手动设置新键名的时候都会引起关联DOM节点重建,进而使得绑定在其上的model也得到刷新[^4]: ```javascript // 动态更改 key 值以促使组件重新挂载 computed: { componentKey() { return this.$route.fullPath; } } ``` 最后值得注意的是,如果仅仅是想让输入框之类控件失去焦点后自动清零的话,那么直接借助原生HTML5特性——即为input添加`autocomplete="off"`即可满足需求。
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值