vue实现点击左侧菜单，右侧显示对应的内容

 1 <template>
 2   <div class="purchaseAdd">
 3      <div class="container">
 4        <div class="navsBox">
 5          <ul>
 6            <li v-for="(item,index) in items" :key="index" @click="chooseClick(index)" :class="{active:index==isActive}">{{item.val}}</li>
 7          </ul>
 8        </div>
 9        <div class="contentBox">
10          <ul>
11            <li v-for="(item,index) in array" :key="index">{{item.val}}</li>
12          </ul>
13        </div>
14      </div>
15   </div>
16 </template>
17 
18 <script>
19 export default {
20   data() {
21     return {
22       isActive: 0,
23       items:[
24         {
25           val:"开关面板1"
26         },{
27           val:"开关面板2"
28         },{
29           val:"开关面板3"
30         },{
31           val:"开关面板4"
32         },{
33           val:"开关面板5"
34         },{
35           val:"开关面板6"
36         },
37       ],
38       site:[
39         {
40           val:"开关面板内容1"
41         },{
42           val:"开关面板内容2"
43         },{
44           val:"开关面板内容3"
45         },{
46           val:"开关面板内容4"
47         },{
48           val:"开关面板内容5"
49         },{
50           val:"开关面板内容6"
51         },
52       ],
53       array:[]
54     }
55   },
56   created() {
57     // 初始化数据默认选中第一个
58     this.array.push(this.site[0])
59   },
60   methods: {
61     chooseClick(index) {
62       this.array = []
63       this.isActive = index;
64       this.array.push(this.site[index])
65     },
66   }
67 }
68 </script>
69 
70 <style scoped lang="less">
71   .purchaseAdd{
72     .container{
73       display: flex;
74       .navsBox{
75         background: #F2F2F2;
76         ul{
77           li{
78             padding:10px 0;
79             border-bottom: 1px solid #e0e0e0;
80             width: 80px;
81             &.active {
82               background: #ff801f;
83               color: #fff;
84             }
85           }
86         }
87       }
88       .contentBox{
89         padding: 20px;
90       }
91     }
92   }
93 </style>