详解使用vue实现tab 切换操作

网络编程 2025/10/25 佚名

3 2 1

在使用jQuery类库实现tab功能时，是获取鼠标在mousenter或click时的index值，然后切换到当前的标题和内容，把其他的标题和内容的状态去掉：

$('.tab .title').find('.item')
 .removeClass('current').eq(index).addClass('current'); // 为index位置的title添加current
$('.tab .content').find('.item')
 .hide().eq(index).show(); // 显示index位置的内容

那么在使用vue实现tab功能时，就不是像jQuery这种直接操作DOM了。我这里总结了下实现tab功能的3个思路，仅供参考。

1. 切换content或者直接切换内容

这种思路下，我们首先把结构搭建起来，然后用一个变量selected表示tab当前展示的位置，给li标签添加mouseenter或click事件，将当前的index传递进去：

html代码:

<div class="hd">
 <ul class="clearfix">
  <li v-for="(item, index) of list" :class="{active:selected==index}" @mouseenter="change(index)">{{item.title}}</li>
 </ul>
</div>
<div v-for="(item, index) of list" :class="{active:selected==index, item:true}" v-html="item.content"></div>

js代码:

var app = new Vue({
 el: '#app',
 data: {
  selected: 0, //当前位置
  list: [
   {
    title: '11111',
    content: '11111content'
   },
   {
    title: '22222',
    content: '222222content'
   },
   {
    title: '33333',
    content: `<div>
        <span style="color:#f00">hello world</span>
        <p><input type="text" v-model="message"></p>
        <p>{{message}}</p>
       </div>`
   }
  ]
 },
 methods: {
  change(index) {
   this.selected = index;
  }
 }
})

绑定的change(index)事件，每次都将index给了selected，然后tab就会切换到对应的标签。

上面的代码里，我们是通过切换div的显示与隐藏来进行执行的。tab中的content里如果只有纯html内容，我们可以直接把list[selected].content展示到.bd中：

<div class='bd' v-html="list[selected].content"></div>

每次selected变换时，bd的内容都会发生变化。

2. 使用currentView

在上面的实现方式中，第3个tab里有个输入框与p标签双向绑定，但是没有效果，因为vue是把list中的内容作为html元素填充到页面中的，message并没有作为vue的属性绑定给input。那么使用组建和currentView就能弥补这个缺陷。

无论使用全局注册还是局部注册的组件，思路都是一样的，我们暂时使用全局注册的组件来实现。

每个组件里展示的是一个tab里的内容，先注册3个组件：

// tab0
Vue.component('item0',{
 template : '<div>1111111content</div>'
});
// tab1
Vue.component('item1',{
 template : '<div>222222content</div>'
})
// tab2
Vue.component('item2',{
 data(){
  return{
   message : ''
  }
 },
 template : `<div>
     <span style="color:#f00">hello world</span>
     <p><input type="text" v-model="message"></p>
     <p>{{message}}</p>
    </div>`
})

然后在html中使用component来展示对应组件的内容，title的展示方式不变：

<div class="hd">
 <ul class="clearfix">
  <li v-for="(item, index) of list" :class="{active:selected==index}" @mouseenter="change(index)">{{item.title}}</li>
 </ul>
</div>
<component :is="currentView"></component>

currentView属性可以让多个组件可以使用同一个挂载点，并动态切换：

var app = new Vue({
 el: '#app',
 data: {
  selected: 0,
  currentView : 'item0',
  list: [
   {
    title: '11111'
   },
   {
    title: '22222'
   },
   {
    title: '33333'
   }
  ]
 },
 methods: {
  change(index) {
   this.selected = index;
   this.currentView = 'item'+index; // 切换currentView
  }
 }
})

这样 message 在组件里就是一个独立的data属性，能在tab里也使用vue绑定事件了.

3. 使用slot方式等

使用slot方式进行内容分发或者一个独立的组件，可以让我们把代码整合到一块，对外提供一个数据接口，只要按照既定的格式填写数据即可。

3.1 slot

用slot方式写一个子组件：

Vue.component('my-slot-tab', {
 props : ['list', 'selected'],
 template : `<div class="tab">
     <div class="hd">
      <ul class="clearfix">
       <slot name="title" v-for="(item, index) in list" :index="index" :text="item.title"> </slot>
      </ul>
     </div>
     <div class="bd">
      <slot name="content" :content="list[selected].content"></slot>
     </div>
    </div>`
});

父组件模板：

<my-slot-tab :list="list" :selected="selected">
 <template slot="title" scope="props">
  <li :class="{active:selected==props.index, item:true}" @mouseenter="change(props.index)">{{ props.text }}</li>
 </template>
 <template slot="content" scope="props">
  <div v-html="props.content"></div>
 </template>
</my-slot-tab>

父组件中slot="title"会替换子组件中name="title"的slot，父组件中slot="content"会替换子组件中name="content"的slot.最终渲染出来的tab结构与上面之前的代码一样。

3.2 其他组件方式

还有一种方式就是把所有的模板都写到组件中。

子组件：

Vue.component('my-tab', {
 props : ['list'],
 template : `<div class="tab">
     <div class="hd">
      <ul class="clearfix">
       <li v-for="(item, index) in list" :class="{active:selected==index, item:true}" @mouseenter="change(index)">{{item.title}}</li>
      </ul>
     </div>
     <div class="bd">
      <div v-for="(item, index) of list" :class="{active:selected==index, item:true}" v-html="item.content"></div>
     </div>
    </div>`,
 data(){
  return{
   selected:0
  }
 },
 methods : {
  change(index){
   this.selected = index;
  }
 }
});

父组件：

<my-tab :list="list"></my-tab>

这种只需要传递一个list即可。

对比这两种方法，slot中可以自定义更多的内容，而下面的方法使用起来更加简单，只是自定义的东西比较少。

4. 总结

上面讲解了几种实现tab功能的方式，没有说哪种方式最好，选择最适合自己项目需求的方式就是最好的。文中有哪有错误或不足，欢迎批评指正。也希望大家多多支持。

vue实现tab切换,vue实现tab,vue,tab切换

标签：

vue实现tab切换,vue实现tab,vue,tab切换

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

白云城资源网 Copyright www.dyhadc.com

评论“详解使用vue实现tab 切换操作”

详解使用vue实现tab 切换操作

暂无“详解使用vue实现tab 切换操作”评论...

www.dyhadc.com 白云城资源网

129,905影音资源

244,626技术资源

111,817软件资源

578,645站长资源

详解使用vue实现tab 切换操作

vue实现tab切换,vue实现tab,vue,tab切换

Bootstrap按钮组实例详解

关于jQuery.ajax()的jsonp碰上post详解

评论“详解使用vue实现tab 切换操作”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

详解使用vue实现tab 切换操作

vue实现tab切换,vue实现tab,vue,tab切换

Bootstrap按钮组实例详解

关于jQuery.ajax()的jsonp碰上post详解

评论“详解使用vue实现tab 切换操作”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存