Question

我想用＆＃34; link＆＃34;上的类更改所有元素的classNames。我正在使用通过元素上的单击操作调用的方法。我测试了从函数获取长度，并且工作正常，但添加一个类没有。谁知道为什么？

HTML

<div id="app">
  <ul>
    <li><a href="#" class="link" @click="myFunc">Link text 1</a></li>
    <li><a href="#" class="link" @click="myFunc">Link text 2</a></li>
    <li><a href="#" class="link" @click="myFunc">Link text 3</a></li>
  </ul>
</div>

JS

var app = new Vue({
el: '#app',
methods: {
  myFunc: function(event){

      // works
      var ElLength = document.getElementsByClassName('link').length;
      console.log('ElLength = ' + ElLength);

      // does not work
      document.getElementsByClassName('link').className += " hullaballoo";

    }
  }
});

JSFIDDLE

Answer 1

您正尝试使用当前代码更改所有链接上的类。

我建议的是：

event.currentTarget.classList.toggle('hullaballoo');

event.currentTarget将始终是您点击的链接。

如果你想要他们所有“hullaballoo”，当你点击一个，你可以做：

<a v-for="link in 3" 
   href="#probably-actually-want-a-button"
   @click.prevent="allSelected = !allSelected"
   :class="{ hullaballoo: allSelected }">
   Link {{ link }}
</a>

然而，必须这样做并不是利用Vue。你也在想DOM。理想情况下，你想根据你所处的状态更改这些类。但是，你需要更多地澄清你的问题以获得更好的答案。

Answer 2

document.getElementsByClassName('link')

返回一个类似html元素的数组对象，.className是该对象中每个元素的属性，也许你可以试试这个：

document.getElementsByClassName('link')[0].className += " hullaballoo";

代替。

Answer 3

接受的答案将返回文档中所有匹配的元素。

如果只想在组件中获取它们，可以这样做：

this.$el.getElementsByClassName('link')

https://vuejs.org/v2/api/#vm-el

className在VueJS方法中不起作用

3 个答案: