<template>
  <div>
    <div> 
      <ul class="ulul">
        <!-- 用v-for的方式渲染li标签 -->
        <!-- 
          :class 根据三元表达式来决定是否添加类名
          @click 1.让当前点击的元素添加active类名 2.显示当前点击的元素所对应的组件
         -->
        <li 
          v-for="(item,index) in menu"
          :key="index"
          :class="{active : ( isActive == item.value ? true : false )}"
          @click="isActive = item.value;currentComp = item.comp"
          >
          {{item.name}}
        </li>
      </ul>
    </div>
    <div>
      <!-- 组件显示的位置，利用is属性的特性，实现动态切换组件 -->
      <test1 :is="currentComp"></test1>
    </div>
  </div>
</template>
<script>
// 引入组件
import test1 from './test1'
import test2 from './test2'
import test3 from './test3'
export default {
  data () {
    return {
      // 当前选中的组件
      currentComp: 'test1',
      // 当前选中的li标签
      isActive: '1',
      menu: [
        {
          // li标签的内容
          name: '会员管理',
          // 当前li标签是否选中的标识
          value: '1',
          // 点击当前li标签，要显示的组件
          comp: 'test1'
        },
        {
          name: '场馆管理',
          value: '2',
          comp: 'test2'
        },
        {
          name: '品牌管理',
          value: '3',
          comp: 'test3'
        }
      ]
    }
  },
  // 注册组件
  components: {
    test1,
    test2,
    test3
  }
}
</script>
<style lang="scss">
// 样式
.ulul {
  overflow: hidden;
  li {
    list-style: none;
    float: left;
    margin-left: 20px;
    font-size: 20px;
  }
  li.active {
    background-color: red;
  }
}
</style>

vue中 is 属性的特性就是使用 is 属性的标签会以 is 的属性值来渲染当前标签

例如：我们只能在 ul 中包裹 li ，但是我们可以给 li 添加 is 属性来决定 li 渲染的哪个组件

<!-- 正常情况下是这样的 -->
<ul>
  <li></li>
</ul>

<!-- 如果我们想这样，就会出错 -->
<ul>
  <component></component>
</ul>

<!-- is的特性可以满足我们的需求 -->
<ul>
  <li :is="component"></li>
</ul>