vue里切换焦点class，非v-for结构

Question

<ul>
  <li @click="getgamelist(1,10)">全部</li>
  <li @click="getgamelist(1,1)">1人</li>
  <li @click="getgamelist(2,4)">2-4人</li>
  <li @click="getgamelist(5,6)">5-6人</li>
  <li @click="getgamelist(7,10)">7人以上</li>
</ul>

以上这种结构，想通过click后给单击的li添加class其他的删除对应的class

搜索过相关方案，基本都是通过v-for拿到index方式解决的。

Answer 1

v-for是提供了一种简写的方式，他的产物就是你这个写法，你不想dry，别人也拦不住你。那你就把网上找的去掉v-for部分，复制n个，index按照顺序变成0-n不就可以了吗

Answer 2

        <ul>
          <li @click="getgamelist(1,10);activeitem(1)" :class="curr === 1 ? 'active' : ''">全部</li>
          <li @click="getgamelist(1,1);activeitem(2)" :class="curr === 2 ? 'active' : ''">1人</li>
          <li @click="getgamelist(2,4);activeitem(3)" :class="curr === 3 ? 'active' : ''">2-4人</li>
          <li @click="getgamelist(5,6);activeitem(4)" :class="curr === 4 ? 'active' : ''">5-6人</li>
          <li @click="getgamelist(7,10);activeitem(5)" :class="curr === 5 ? 'active' : ''">7人以上</li>
        </ul>

html

activeitem(index) {
      index < 6 ? this.curr = index : this.curr2 = index
    }

通过讨论组的某群友提醒了下，可以把这些参数写死来判断。