首页 文章

Vue.js动态类

提问于
浏览 次
5

我在这里有一些使用Vue.js的html：

<div id="app">
  <ul class="navbar-nav">
      <li class="nav-item" v-for="tab in tabs">
          <a href="#" class="nav-link">{{ tab.name }}</a>
      </li>
  </ul>
</div>

我在这里有javascript：

var app = new Vue({
  el: '#app',
  data: {
      tabs: [
        { name: "Home", active: "" },
        { name: "Challenges", active: "active" },
        { name: "Scoreboard", active: "" },
        { name: "About", active: "" }
    ]
  }
});

我想将class设置为tabs.active，因为我正在使用bootstrap . 我怎样才能做到这一点？

javascript html vue.js vuejs2 dynamic-class

3 回答

  • 0

    请参阅官方文件以获得更清晰的理解https://vuejs.org/v2/guide/class-and-style.html

    回复于
  • 3

    像这样使用class binding：

    <li class="nav-item" :class="{active: tab.active === 'active'}" v-for="tab in tabs">

    new Vue({
  el: '#app',
  data: {
      tabs: [
        { name: "Home", active: "" },
        { name: "Challenges", active: "active" },
        { name: "Scoreboard", active: "" },
        { name: "About", active: "" }
    ]
  }
});

    .active .nav-link {
  color: white;
  background: blue;
}

    <script src="https://unpkg.com/vue@2.5.17"></script>

<div id="app">
  <ul class="navbar-nav">
      <li class="nav-item" :class="{active: tab.active === 'active'}" v-for="tab in tabs">
          <a href="#" class="nav-link">{{ tab.name }}</a>
      </li>
  </ul>
</div>
    回复于
  • 1

    加

    v-bind:class="tab.active"

    所以你的代码应该是这样的：

    var app = new Vue({
  el: '#app',
  data: {
    tabs: [{
        name: "Home",
        active: ""
      },
      {
        name: "Challenges",
        active: "active"
      },
      {
        name: "Scoreboard",
        active: ""
      },
      {
        name: "About",
        active: ""
      }
    ]
  }
});

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <ul class="navbar-nav">
    <li class="nav-item" v-for="tab in tabs" v-bind:class="tab.active">
      <a href="#" class="nav-link">{{ tab.name }}</a>
    </li>
  </ul>
</div>
    回复于

相关问题