Vue.js Vue：获取对元素或数据绑定的引用以更改其类？

我有三个嵌套的

v-for

循环：

<div v-for="(verse, verse_idx) in verses" :key="verse_idx" >
  <span v-for="(word, word_idx) in verse" :key="word_idx">
    <span v-for="(syllable, syllable_idx) in word.syllables" :key="syllable_idx">
      <span v-html="syllable" :ref="verse_idx + ':' + word_idx + ':' + syllable_idx"></span>          
    </span>
  </span>
</div>

我想更改最里面的

span

元素的背景色。页面上有1000个，我需要引用并更改一个特定的。这些

span

元素中的每一个都需要高亮显示一秒钟，然后依次取消高亮显示

---

我应该通过抓取一个引用（如上所述）然后以编程方式（jQuery风格）向元素添加一个类来实现这一点，还是应该通过数据绑定来实现这一点，数据绑定将根据需要切换类？Vue处理这个问题的方式是什么？

我们可以按如下方式绑定类

<div v-for="(verse, verse_idx) in verses" :key="verse_idx" >
  <span v-for="(word, word_idx) in verse" :key="word_idx">
    <span v-for="(syllable, syllable_idx) in word.syllables" :key="syllable_idx">
      <span
        v-html="syllable"
        :class="{hightlight: hightlightValue == `${verse_idx}-${word_idx}-${syllable_idx}`}"
      > 
      </span>          
    </span>
  </span>
</div>


data() {
  hightlightValue: ''
}

<style>
  .hightlight {
    background: red
  }
</style>

---

我们可以按如下方式绑定类

<div v-for="(verse, verse_idx) in verses" :key="verse_idx" >
  <span v-for="(word, word_idx) in verse" :key="word_idx">
    <span v-for="(syllable, syllable_idx) in word.syllables" :key="syllable_idx">
      <span
        v-html="syllable"
        :class="{hightlight: hightlightValue == `${verse_idx}-${word_idx}-${syllable_idx}`}"
      > 
      </span>          
    </span>
  </span>
</div>


data() {
  hightlightValue: ''
}

<style>
  .hightlight {
    background: red
  }
</style>

---

Vue的方法肯定是在数据中传递并使用突出显示信息。至少可以说，页面上每个音节上的ref都会有一个内存占用

如果始终有零个或一个突出显示的项目，则可以在数据中有一个

HighlightedSymplete

值，并按如下方式读取（使用适当的CSS）：

---

如果需要处理多个音节被突出显示的可能性，则需要将

音节

扩展到一个数据结构，该数据结构包含一个类似于可以读取的

突出显示的
布尔成员。
Vue的方法肯定是在数据中传递并使用突出显示信息。至少可以说，页面上每个音节上的ref都会有一个内存占用

如果始终有零个或一个突出显示的项目，则可以在数据中有一个
HighlightedSymplete
值，并按如下方式读取（使用适当的CSS）：



如果需要处理多个音节高亮显示的可能性，则需要将
音节
扩展到一个数据结构，该数据结构包含一个类似于
高亮显示的
布尔成员的内容，您可以读取该成员。
此代码始终每隔一个音节高亮显示一次，而不是特定时间的特定音节。此代码始终突出显示其他每个音节，而不是特定时间的特定音节。
<div v-for="(verse, verse_idx) in verses" :key="verse_idx">
  <span v-for="(word, word_idx) in verse" :key="word_idx">
    <span v-for="(syllable, syllable_idx) in word.syllables" :key="syllable_idx">
      <span v-html="syllable" :class="{ 'highlighted': highlightedSyllable === `${verse_idx}:${word_idx}:${syllable_idx}` }"></span>          
    </span>
  </span>
</div>