vue.js - 在导航选项卡上切换处于事件状态的 css 类

Question

我是 Vue 的新手，所以我正在构建一个测试项目来试用它。我有一些标签:

<div class="tabs">
      <ul>
           <li class="is-active"><a> first tab </a></li>
           <li><a> second tab </a></li>
           <li><a> third tab</a></li>
      </ul>
</div>

现在，使用 Vue，我想要一个方法从所有 li 中删除 is-active 类并设置 is-active点击 li。

我已经涉猎了一些，但我找不到任何直接的方法来解决这个问题。我看到 Vue 有很好的条件渲染解决方案，但我需要先修复这部分。

我应该在哪里查看，Vue 中通常如何解决此类问题？您是否只是遍历 ul 的所有子级以删除该类，然后根据 li 的索引设置 is-active？

Answer 1

您可以通过多种方式做到这一点。

这是一个快速的。

console.clear()

new Vue({
  el: "#app",
  data:{
    activeTab: 1
  }
})

.is-active {
  color: blue
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script>
<div id="app">
  <div class="tabs">
    <ul>
      <li :class="{'is-active': activeTab === 1}" @click="activeTab = 1"><a> first tab </a></li>
      <li :class="{'is-active': activeTab === 2}" @click="activeTab = 2"><a> second tab </a></li>
      <li :class="{'is-active': activeTab === 3}" @click="activeTab = 3"><a> third tab</a></li>
    </ul>
  </div>
</div>

Vue 是数据驱动的。您通常希望基于数据驱动 HTML。这里，class由activeTab驱动，activeTab通过点击列表元素设置。

在某些时候，您的选项卡可能是数据而不是硬编码。然后您的代码最终看起来像这样。

console.clear()

const tabs = [{text: "first tab"}, {text: "second tab"}, {text: "third tab"}]

new Vue({
  el: "#app",
  data:{
    activeTab: tabs[0],
    tabs
  }
})

.is-active {
  color: blue
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script>
<div id="app">
  <div class="tabs">
    <ul>
      <li v-for="tab in tabs"
          :class="{'is-active': activeTab === tab}"
          @click="activeTab = tab">
        <a>{{tab.text}}</a>
      </li>
    </ul>
  </div>
</div>

等等。这就是用 Vue 完成这种事情的方式。