Javascript 在VueJS中单击时切换类

我正在学习Vuejs，我经常发现一些简单的事情，比如删除一个类是一件痛苦的事情。请告诉我如何允许基于3个链接之间的点击添加或删除.active类

在下面的示例中，添加工作正常，但它会将.active添加到所有链接，并且在再次单击时不会删除

<div id="app">
  <h2>App</h2>
  <ul>
    <li><a href="#" class="link" :class="{ active: isActive }" @click="activeLink">Link text</a></li>
    <li><a href="#" class="link" :class="{ active: isActive }" @click="activeLink">Link text</a></li>
    <li><a href="#" class="link" :class="{ active: isActive }" @click="activeLink">Link text</a></li>
  </ul>
</div>

---

JSFIDLE就在这里，

您需要捕获方法中的事件处理程序，并使用它来引用被调用方，即本例中的锚对象

看小提琴：

更新：

你可以试试这把小提琴，看看它是否正中靶心：

var-app=新的Vue({
el:“#应用程序”，
数据：{
isActive:错误
},
方法：{
活动链接（事件）{
var复选框=document.getElementsByClassName（“noclass”）；
对于（var i=0；i这里有一个替代解决方案，它可能会对您的代码进行超出您所需的修改。我认为这可能很有用，因为您正在学习，并且可能对替代方案感兴趣。我首先将您的链接声明为vue中的对象数组，以便我们可以为每个对象分配一个活动属性。然后我们可以切换active value inline或使用TOGLEActive函数（当前未使用..如果您更喜欢使用函数而不是内联逻辑，请参见图示）

Html:

您可以使用
数据属性来保存当前活动链接。然后，如果它是活动链接，并且应该应用
.active
类，则可以对任何给定的链接进行测试

然后，只需在单击链接时设置该属性的新值。如果单击了当前活动的同一链接，则该属性将被清除，从而从所有链接中删除
.active
类。否则，该类将添加到单击的链接中

这是一个演示我在实际操作中的意思的示例，但您的标记可能会如下所示：

<li><a href="#" class="link" :class="{ active: activeId == 'link-1' }"
    @click.prevent="activeLink('link-1')">Link text</a></li>

<li><a href="#" class="link" :class="{ active: activeId == 'link-2' }"
    @click.prevent="activeLink('link-2')">Link text</a></li>

<li><a href="#" class="link" :class="{ active: activeId == 'link-3' }"
    @click.prevent="activeLink('link-3')">Link text</a></li>

data: {
  activeId: null
},
methods: {
  activeLink(linkIdent) {
    this.activeId = this.activeId === linkIdent ? null : linkIdent
  }
}

这显然不是一个干净的解决方案，但我坚持您的要求，即该解决方案符合您提供的标记。
使用V-for和一个项目数组，因此您无需静态键入链接。这允许您寻找动态功能


var-app=新的Vue({
el:“#应用程序”，
数据：{
链接：[
{text:“链接文本”，活动：false}，
{text:“链接文本”，活动：false}，
{text:“链接文本”，活动：false}
]
},
方法：{
激活（链接）{
link.active=！link.active
}
}
})
.link{
文字装饰：无；
颜色：#555；
}
.主动{
文字装饰：下划线；
颜色：#42b983；
}

应用程序



您好，看着您的小提琴，这不会删除。单击其他链接时不会删除类。啊，您想在单击任何其他锚点时删除该类。无法理解。这将在再次单击同一元素时重置类。只是一个切换效果。试试看。是的，我明白了，有没有办法让它在所有三个链接之间切换？我尝试过你的示例，但无法使其发挥作用。请检查更新的小提琴。它正在从所有链接中删除“noclass”，将“链接活动”类分配给它们，并将“noclass”分配给被单击的对象。你可以使用“链接活动”进行操作根据需要。您好，谢谢，但我正在寻找一种可以与我的代码一起工作的解决方案。谢谢，但有没有一种方法可以使用if语句来实现这一点？我已经尝试过，但它针对的是所有项目，而不是正在单击的项目。您的示例中的问题是，没有任何标识哪个链接处于活动状态的方法。它只是为整个应用程序。你必须有某种方法来识别每个链接，然后设置相应的标识符以将该链接标记为活动链接。这就是我的示例所演示的。如果出于某种原因必须使用
If
语句，你只需将我的
activeLink
函数的主体更改为
If即可（this.activeId==LinkId）this.activeId=null；else this.activeId=LinkId；
  var app = new Vue({
    el: '#app',
    data: {
      isActive: false
    },
    methods: {
      activeLink(event) {
        var checkboxes = document.getElementsByClassName ("noclass");

        for (var i=0; i<checkboxes.length; i++) {
           checkboxes[i].className = "link active";
           //checkboxes[i].className = "link";
        }
            event.target.className = "noclass";
      }
    }
  })

<div id="app">
  <h2>App</h2>
  <ul>
    <li v-for="l in links">
      <a href="#" class="link" :class="{ active: l.active}" @click="l.active = !l.active">{{l.text}}</a>
    </li>
  </ul>
</div>

var app = new Vue({
  el: '#app',
  data: {
    links: [{
      text: "Link text",
      active: false
    },{
      text: "Second text",
      active: false
    },{
      text: "Third text",
      active: false
    }]
  },
  methods: {
    //To use this function make @click in html to:
    //@click="toggleActive(l)"
    toggleActive(x) {
      x.active = !x.active;
    }
  }
})

<li><a href="#" class="link" :class="{ active: activeId == 'link-1' }"
    @click.prevent="activeLink('link-1')">Link text</a></li>

<li><a href="#" class="link" :class="{ active: activeId == 'link-2' }"
    @click.prevent="activeLink('link-2')">Link text</a></li>

<li><a href="#" class="link" :class="{ active: activeId == 'link-3' }"
    @click.prevent="activeLink('link-3')">Link text</a></li>

data: {
  activeId: null
},
methods: {
  activeLink(linkIdent) {
    this.activeId = this.activeId === linkIdent ? null : linkIdent
  }
}