在 VueJS 中单击时切换 class

Question

我正在学习 Vuejs，并且我不断发现一些简单的事情，例如删除 class 是一件很痛苦的事情。请告诉我如何允许根据 3 个链接之间的点击添加或删除 .active class。

在下面的示例中，添加工作正常，但它向所有链接添加了 .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>

JS

var app = new Vue({
  el: '#app',
  data: {
    isActive: false
},
methods: {
  activeLink() {
    // the line below did not work
    // document.getElementsByClassName("active").isActive = false,
    this.isActive = true
  }
 }
})

JSfiddle 来了，https://jsfiddle.net/s9r4q0gc/

Answer 1

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

见 fiddle : https://jsfiddle.net/s9r4q0gc/2/

activeLink(event) {
    if(event.target.className == "noclass")
    {
        event.target.className = "link active";
    }
    else
    {
        event.target.className = "noclass";
    }
  }

更新：

可以试试这个 fiddle 看看它是否正中靶心：https://jsfiddle.net/s9r4q0gc/4/

  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";
      }
    }
  })

Answer 2

这是一个替代解决方案，它可能会比您想要的更多地修改您的代码。我认为这可能有用，因为您只是在学习并且可能对替代方案感兴趣。我首先将您的链接声明为 vue 中的对象数组，以便我们可以为每个链接分配一个 active 属性。然后我们可以直接切换活动值内联或使用 toggleActive 函数（当前未使用..如果您更喜欢使用函数而不是内联逻辑，只是为了说明）。

Html:

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

Javascript:

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

https://jsfiddle.net/yrbt90v9/

Answer 3

你可以做的是使用 data 属性来保存当前活动的 link。然后，您将能够进行任何给定的 link 测试，如果它是活动的 link 以及是否应该应用 .active class。

那么只需在单击 link 时设置属性的新值即可。如果单击当前处于活动状态的同一个 link，则会清除属性，从而从所有 link 中删除 .active class。否则，class 将添加到被单击的 link。

这是 CodePen 演示我的意思的实际操作，但您的标记可能如下所示：

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

你的 JS 可能看起来像这样：

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

它显然不是一个干净的解决方案，但我坚持您的要求，即解决方案符合您提供的标记。

Answer 4

使用 V-for 和项目数组，这样您就无需静态键入链接。这允许您正在寻找的动态功能。

  var app = new Vue({
    el: '#app',
    data: {
      links: [
       {text: "Link Text", active: false},
       {text: "Link Text", active: false},
       {text: "Link Text", active: false}
      ]
    },
    methods: {
      activate(link) {
        link.active = !link.active
      }
    }
  })

.link{
  text-decoration: none;
  color: #555;
}
.active{
  text-decoration: underline;
  color: #42b983;
}

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

在 VueJS 中单击时切换 class

Toggle class on click in VueJS

javascript

vuejs2