className 在 VueJS 方法中不起作用

Question

我想更改“链接”上的类的所有元素的类名。我正在使用一种通过元素上的单击操作调用的方法。我测试了从函数中获取长度，效果很好，但添加类却不行。有人知道为什么吗？

超文本标记语言

<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

document.getElementsByClassName('link') 

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

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

反而。