vue中实现点击div有样式去除样式 无样式添加样式

DOM部分：

<el-dialog title="登录" :visible.sync="loginDialogVisible" width="30%">
      <!-- 登录方式 -->
      <div class="login-type">
        <div
          v-for="item in loginType"
          :key="item.id"
          :class="{ active: item.index === currentIndex }"
          @click="addClass(item.index)"
        >
          {{ item.title }}
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="loginDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="loginDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

data部分：

　　　　currentIndex: 1,

      loginType: [

        {

          id: 1,

          title: '手机号登录',

          index: 1

        },

        {

          id: 2,

          title: '邮箱登录',

          index: 2

        }

      ]

methods方法部分：

　　addClass(index) {
      this.currentIndex = index;
    }

scss样式部分：

.login-type {
    div {
      padding: 0.714286rem;
      margin-bottom: 0.714286rem;
      text-align: center;
      line-height: 1.285714rem;
      background-color: $blue;
      color: #fff;
      border-radius: 0.357143rem;
      &.active {
        color: $theme-color;
        // background-color: #202020;
      }
    }
  }