mui-ui tab-container

最新推荐文章于 2025-05-21 14:05:38 发布

导乐符

最新推荐文章于 2025-05-21 14:05:38 发布

阅读量800

点赞数

CC 4.0 BY-SA版权

分类专栏： vue mint-ui

本文链接：https://blog.youkuaiyun.com/qq_36800701/article/details/82996786

vue 同时被 2 个专栏收录

27 篇文章

订阅专栏

mint-ui

3 篇文章

订阅专栏

本文详细介绍了在Vue框架中如何正确使用MT Tab Container组件实现面板切换显示子页面的功能。通过修改active值与<tab-container-item>的id保持一致，可以实现不同页面的切换。文章提供了具体代码示例，包括如何通过按钮点击事件改变active值来达到页面切换的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

面板，可切换显示子页面。

官网的例子：

<mt-tab-container :active.sync="active">
  <mt-tab-container-item id="tab-container1">
    <mt-cell v-for="n in 10" :title="'tab-container1 ' + $index"></mt-cell>
  </mt-tab-container-item>
  <mt-tab-container-item id="tab-container2">
    <mt-cell v-for="n in 5" :title="'tab-container2 ' + $index"></mt-cell>
  </mt-tab-container-item>
  <mt-tab-container-item id="tab-container3">
    <mt-cell v-for="n in 7" :title="'tab-container3 ' + $index"></mt-cell>
  </mt-tab-container-item>
</mt-tab-container>

改变 ative 的值，与 <tab-container-item> 的 id 一致即显示对应页面。

自己在写的时候改变active的值并没有变化，可能是我不会用.sync吧，所以看了别人的博客应该这么写才有效果

<div id="app">
	<button @click="tab('tab-container1')">1</button>
	<button @click="tab('tab-container2')">2</button>
	<button @click="tab('tab-container3')">3</button>
	<mt-tab-container v-model="active">
		<mt-tab-container-item id="tab-container1">
			<mt-cell v-for="n,index in 10" 
				:key="index"
				:title="'tab-container1 ' + index"
			></mt-cell>
		</mt-tab-container-item>
		<mt-tab-container-item id="tab-container2">
			<mt-cell v-for="n,index in 5" 
				:key="index"
				:title="'tab-container2 ' + index"
			></mt-cell>
		</mt-tab-container-item>
		<mt-tab-container-item id="tab-container3">
			<mt-cell v-for="n,index in 7" 
				:key="index"
				:title="'tab-container3 ' + index"
			></mt-cell>
		</mt-tab-container-item>
	</mt-tab-container>
</div>

把:active.sync="active"改成了v-model="active",其实改变的是<mt-tab-container>的value值，但官网说是改变active的值，可能是我哪里没弄对吧，另外$index说是vue2.x已经废弃了，所以会报错的