vue tab切换布局

 

页面

功能

点击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>