我这里有一些使用 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: "" }
]
}
});
我想将类设置为 tabs.active 因为我正在使用 Bootstrap 。我该怎么做?
最佳答案
添加
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>
关于javascript - Vue.js 动态类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53698774/