vue tab切换布局

最新推荐文章于 2024-09-17 00:54:14 发布

weixin_30773135

最新推荐文章于 2024-09-17 00:54:14 发布

阅读量362

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/1032473245jing/p/11103103.html

本文介绍了一个使用Vue.js实现的Tab组件示例，通过点击不同的tab，可以切换展示的内容。示例中包含两个tab，分别对应content1和content2，每个content都接收一个list作为数据源。

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

页面

功能

点击tab1和tab2，content内容切换content1和content2

 1 <template>
 2     <div>
 3         <div class="tab">
 4             <div>tab1</div>
 5             <div>tab2</div>
 6         </div>
 7         <div class="conten">
 8             <content1 :contentlist1="list1"></content1>
 9             <content2 :contentlist2="list2"></content2>
10         </div>
11     </div>
12 </template>
13 
14 <script>
15 import content1 from "XXXX"
16 import content2 from "XXXX"
17 export default {
18     name: "tab",
19     data() {
20         return {
21             list1: [],
22             list2: []
23         }
24     },
25     components: {
26         content1,
27         content2
28     }
29 };
30 </script>