vue 中点击切换图标，切换选中状态

很多新手小白做这个切换下拉列表，选中列表记录当前选中状态，图标也变成当前选中状态的时候都会比较绕，其实其核心就是把（icon图标、样式加载变成变量话，按需加入想要的变量即可）

例如下面这个例子：

<template>
  <div>
    <div class="header-icon-border">
      <el-popover placement="bottom" trigger="click">
        <div
          class="modeGroup"
          :class="[SelectType === 0 ? 'activeStyle' : '']"
          @click="buttonEditWireFrame(matModel, 0)"
        >
          <div class="modeBox">
            <i class="iconfont iconcaiZhiMoShi"></i><span>前视图</span>
          </div>
        </div>
        <div
          class="modeGroup"
          :class="[SelectType === 1 ? 'activeStyle' : '']"
          @click="buttonEditWireFrame(lineModel, 1)"
        >
          <div class="modeBox">
            <i class="iconfont iconxianKuang1"></i><span>左视图</span>
          </div>
        </div>
        <div
          class="modeGroup"
          :class="[SelectType === 2 ? 'activeStyle' : '']"
          @click="buttonEditWireFrame(mat_lineModel, 2)"
        >
          <div class="modeBox">
            <i class="iconfont iconcaiZhiXian"></i><span>右视图</span>
          </div>
        </div>
        <div
          class="modeGroup"
          :class="[SelectType === 3 ? 'activeStyle' : '']"
          @click="buttonEditWireFrame(line_transpModel, 3)"
        >
          <div class="modeBox">
            <i class="iconfont icontouMing"></i><span>俯视图</span>
          </div>
        </div>
        <i
          slot="reference"
          :class="['icon', 'iconfont', wireframe]"
          :title="'切换预览模式'"
        ></i>
      </el-popover>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      SelectType: 0, //下拉框中当前的选中状态
      wireframe: 'iconcaiZhiMoShi', //页面上默认的图标
    };
  },
  methods: {
    // 切换预览模式
    buttonEditWireFrame(val, index) {
      this.SelectType = index;
      switch (val) {
        case Tz3dModelModeType.MAT:
          this.wireframe = "iconcaiZhiMoShi";
          break;
        case Tz3dModelModeType.LINE:
          this.wireframe = "iconxianKuang1";
          break;
        case Tz3dModelModeType.MAT_LINE:
          this.wireframe = "iconcaiZhiXian";
          break;
        case Tz3dModelModeType.LINE_TRANSP:
          this.wireframe = "icontouMing";
          break;
      }
    }
  }
};
</script>
<style scoped>
.activeStyle {
  background: #f1f7ff;
  color: #fdb906;
}
</style>