Vue.js 动态 类
Vue.js dynamic classes
我有一些 html 使用 Vue.js 在这里:
<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。我该怎么做?
添加
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>
像这样使用 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>
我有一些 html 使用 Vue.js 在这里:
<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。我该怎么做?
添加
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>
像这样使用 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>