Question

我在vue方法中使用jquery做到了。但我仍然想要一个vue js解决方案。我想从li中删除该类，然后在单击的li上添加相同的类。所以这就是我使用jquery plus vue做的事情

<ul class="manage-link">
    <li class="current 1" @click="run(1,'In progress')">Awaiting approval</li>
    <li class="2" @click="run(2,'In progress')">In progress</li>
    <li class="3" @click="run(3,'Completed')">Completed</li>
    <li class="4" @click="run(4,'Shipped')">Shipped</li>
    <li class="5" @click="run(5,'Delivered')">Delivered</li>
    <li class="6" @click="run(6,'Cancelled')">Cancelled</li>
    <li class="7" @click="run(7,'Under review')">Under review</li>
    <li class="pointer"></li>

</ul>

 methods: {
        run(num, str){
            console.log('ok');
            $(".manage-link>li").removeClass("current");
            $('.'+num).addClass('current');
        }
    }

此处str用于其他任务。与此问题无关。这工作得很好，但我想只使用vue js实现相同的功能。谢谢。

Answer 1

使用"flex-layout"

非常容易

<li class="1" :class="{current: current == 1}" @click="run(1)">Awaiting approval</li>
<li class="2" :class="{current: current == 2}" @click="run(2)">In Progress</li>
<li class="3" :class="{current: current == 3}" @click="run(3)">Completed</li>
<!-- and so on -->

data () { // or just "data:" if this is not a component
  return {
    current: 1
  }
},
methods: {
  run(num) {
    this.current = num
  }
}

Answer 2

您可以在点击处理程序中传递$event对象，然后像这样处理类操作：

<ul class="manage-link">
    <li class="current 1" @click="run($event, 1,'In progress')">Awaiting approval</li>
    <li class="2" @click="run($event, 2,'In progress')">In progress</li>
    <li class="3" @click="run($event, 3,'Completed')">Completed</li>
    <li class="4" @click="run($event, 4,'Shipped')">Shipped</li>
    <li class="5" @click="run($event, 5,'Delivered')">Delivered</li>
    <li class="6" @click="run($event, 6,'Cancelled')">Cancelled</li>
    <li class="7" @click="run($event, 7,'Under review')">Under review</li>
    <li class="pointer"></li>

</ul>

 methods: {
    run(ev, num, str){
        console.log('ok');
        [].slice.call(ev.target.parentNode.children).forEach(function(child) {
            child.classList.remove('current');
        });
        ev.target.classList.add('current');
    }
}

Answer 3

您可以使用$ index来保存活动元素。比如

<ul>
  <li 

<!-- begin snippet: js hide: false console: true babel: false -->

<ul class="manage-link">
    <li class="current 1" :class="{ active ? activeIndex === 1 }"@click="run(1,'In progress')">Awaiting approval</li>
    <li class="2"  :class="{ active ? activeIndex === 2 } @click="run(2,'In progress')">In progress</li>
    <li class="3" :class="{ active ? activeIndex === 3 } @click="run(3,'Completed')">Completed</li>
    <li class="4" :class="{ active ? activeIndex === 4 } @click="run(4,'Shipped')">Shipped</li>
    <li class="5" :class="{ active ? activeIndex === 5 } @click="run(5,'Delivered')">Delivered</li>
    <li class="6" :class="{ active ? activeIndex === 6 } @click="run(6,'Cancelled')">Cancelled</li>
    <li class="7" :class="{ active ? activeIndex === 7 } @click="run(7,'Under review')">Under review</li>
    <li class="pointer"></li>

</ul>

 data: {
  return {
    activeIndex: -1,
  };
 },
 methods: {
        run(num, str){
            this.activeIndex = num;
        }
    }

</ul>

如何在单击的li上添加类，并在vue 2中的li的任何位置删除旧类表单

3 个答案: