在导航选项卡上切换是活动的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我希望有一个方法is-active从所有lis 中删除该类并设置is-active为li单击.

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

我应该在哪里寻找,以及这些问题通常如何在Vue中得到解决？你只是循环遍历所有的孩子ul去除类,然后is-active根据索引设置li？

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完成这种事情的方式.