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

 

顺便为大家推荐好听的歌曲

 

 

 

 

 

<template>
  <div class="purchaseAdd">
     <div class="container">
       <div class="navsBox">
         <ul>
           <li v-for="(item,index) in items" :key="index" @click="chooseClick(index)" :class="{active:index==isActive}">{{item.val}}</li>
         </ul>
       </div>
       <div class="contentBox">
         <ul>
           <li v-for="(item,index) in array" :key="index">{{item.val}}</li>
         </ul>
       </div>
     </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: 0,
      items:[
        {
          val:"开关面板1"
        },{
          val:"开关面板2"
        },{
          val:"开关面板3"
        },{
          val:"开关面板4"
        },{
          val:"开关面板5"
        },{
          val:"开关面板6"
        },
      ],
      site:[
        {
          val:"开关面板内容1"
        },{
          val:"开关面板内容2"
        },{
          val:"开关面板内容3"
        },{
          val:"开关面板内容4"
        },{
          val:"开关面板内容5"
        },{
          val:"开关面板内容6"
        },
      ],
      array:[]
    }
  },
  created() {
    // 初始化数据默认选中第一个
    this.array.push(this.site[0])
  },
  methods: {
    chooseClick(index) {
      this.array = []
      this.isActive = index;
      this.array.push(this.site[index])
    },
  }
}
</script>

<style scoped lang="less">
  .purchaseAdd{
    .container{
      display: flex;
      .navsBox{
        background: #F2F2F2;
        ul{
          li{
            padding:10px 0;
            border-bottom: 1px solid #e0e0e0;
            width: 80px;
            &.active {
              background: #ff801f;
              color: #fff;
            }
          }
        }
      }
      .contentBox{
        padding: 20px;
      }
    }
  }
</style>

 

若有不明白请加群号：复制 659182980 ，也可扫码，希望能帮助到大家。