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中删除li类，并将is-active设置为li点击。

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

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

Answer 1

有十几种方法可以做到这一点。

这是一个快速的。

＆＃13;

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

＆＃13;

.is-active {
  color: blue
}

＆＃13;

<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>

＆＃13;

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

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

＆＃13;

console.clear()

const tabs = [{text: "first tab"}, {text: "second tab"}, {text: "third tab"}]

new Vue({
  el: "#app",
  data:{
    activeTab: tabs[0],
    tabs
  }
})

＆＃13;

.is-active {
  color: blue
}

＆＃13;

<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>

＆＃13;

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

在导航选项卡上切换是活动的css类

1 个答案: