在导航选项卡上切换 is-active css 类 [英] Toggle is-active css classes on navigation tabs

问题描述

我对 Vue 很陌生，所以我正在构建一个测试项目来试用它.我有一些标签:

<ul><li class="is-active"><a>第一个标签</a></li><li><a>第二个标签</a></li><li><a>第三个标签</a></li>

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

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

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

解决方案

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

这是一个快速的.

console.clear()新的 Vue({el: "#app",数据:{活动标签:1}})

.is-active {颜色:蓝色}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script><div id="应用程序"><div class="tabs"><ul><li :class="{'is-active': activeTab === 1}" @click="activeTab = 1"><a>第一个标签</a></li><li :class="{'is-active': activeTab === 2}" @click="activeTab = 2"><a>第二个标签</a></li><li :class="{'is-active': activeTab === 3}" @click="activeTab = 3"><a>第三个标签</a></li>

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

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

console.clear()const tabs = [{text: "first tab"}, {text: "second tab"}, {text: "third tab"}]新的 Vue({el: "#app",数据:{活动标签:标签[0]，标签}})

.is-active {颜色:蓝色}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script><div id="应用程序"><div class="tabs"><ul><li v-for="标签中的标签":class="{'is-active': activeTab === tab}"@click="activeTab = tab"><a>{{tab.text}}</a>

等等.Vue就是这样完成的.

I'm pretty new to Vue so I'm building a test project to try it out. I have some tabs:

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

now, using Vue I want to have a method that removes the is-active class from all lis and set is-active to the li clicked.

I've dabbled a bit but I can't find any straightforward ways to go about it. I see that Vue has good solutions for conditional rendering but I need to fix this part first.

Where should I be looking, and how are problems like these usually solved in Vue? Do you just loop through all children of ul to remove the class, then set is-active based on the index of the li?

解决方案

There are a dozen ways you can do this.

Here is a quick one.

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 is data driven. You typically want to drive the HTML based on data. Here, class is driven by the activeTab, and activeTab is set by clicking list elements.

At some point, your tabs are likely to be data instead of hardcoded. Then your code ends up looking something like this.

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>

And so forth. This is how this kind of thing is accomplished with Vue.

这篇关于在导航选项卡上切换 is-active css 类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！