如何在vue js中使用refs作为querySelectorAll

Question

我需要的是在上下滚动时更改链接的颜色。如何使用 ref select Link 1/2/3？

<nav class="header-nav">
   <ul>
     <li class="tablet-sm-hide">
       <router-link to="/">Link 1 </router-link>
     </li>
     <li class="tablet-sm-hide">
       <router-link to="/">Link 2  </router-link>
     </li>
     <li class="tablet-sm-hide">
       <router-link to="/">Link 3 </router-link>
     </li>
       </ul>

</nav>

Answer 1

您可以使用 this.$refs 访问您的参考文献。

例子

const anchors = this.$refs["a"];

console.log(anchors);

Answer 2

使用这个方法

this.$refs["n1"].$el.style.color = 'red'
this.$refs["n2"].$el.style.color = 'green'
this.$refs["n3"].$el.style.color = 'blue'

<nav class="header-nav">
    <ul>
        <li class="nav">
            <router-link to="/" ref="n1">Link 1 </router-link>
        </li>
        <li class="nav">
            <router-link to="/" ref="n2">Link 2  </router-link>
        </li>
        <li class="nav">
            <router-link to="/" ref="n3">Link 3 </router-link>
        </li>
    </ul>
</nav>

如何在vue js中使用refs作为querySelectorAll

How to use refs in vue js as querySelectAll

refs

vue.js

vuejs3