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

<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方式解决的。

回答:

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

回答:

        <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
    }

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注