javascript - 在 vue 中，如何显示标签的属性？（v-for 如何与 html 一起工作？）

Question

<ul>
    <span class="tabs"
         :class="{ activeTab: selectedTab === tab }"
          v-for="(tab, index) in tabs"
          @click="selectedTab = tab"
          :key="tab">
          {{ index+1 }}. {{ tab }}</span>
</ul>

.....

 data() {
      return {
        tabs: ['Reviews', 'Make a Review'],
        selectedTab: 'Reviews'
        
      }
    }
  })

在单击“评论”或“进行评论”之前，我想知道“标签”的价值。那么如何显示“标签”？

标签： javascriptvue.js

Answer 1

移动:class后v-for

<ul>
    <span class="tabs"
        v-for="(tab, index) in tabs"
        :class="{ activeTab: selected === tab }"
        @click="selectedTab = tab" 
        :key="tab">
        {{ index+1 }}. {{ tab }}</span>
</ul>