v-for 遍历数组点击动态绑定样式

这可能是一个对于任何js开发者来说都非常简单的问题，或者根本谈不上被叫做“问题”，“基操”而已。但是，很遗憾，我为此开了个篇幅简略记录下它，因为这是我处于前端开发基础阶段数次阻滞过我的问题，以下暂提供一种解决方案，后续可能补充。

这类问题多见于单页面应用（SPA）中的侧边栏、表格列等，当我曾拿到这个需求时，我以为我能用Vue中介绍的Class动态绑定来解决，事实上的确如此，但我用错了，请看我错误的解决方法：

HTML

<template>
<!-- 点击某个绑定样式 -->
  <ul>
    <li v-for="(data, index) in formData" :key="data.id" :class="{active: isActive}" @click="currentInfo(data, index)">name: {
  {data.name}}，age: {
  {data.age}}
    </li>
  </ul>

</template>

JavaScript

<script>
export default {
    name: 'classActive'
    data() {
        return {
            isActive: false,    // 用来判断active样式类是否显示
            formData: [{
                id: 1,