Javascript 如何将 class="active" 放在 vuejs for 循环中的第一个元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42487711/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to put class="active" to first element in vuejs for loop
提问by Nitish Kumar
I'm trying to learn vue.js. I'm adding list of elements, I want to add class="active"only to the first element in the for loop. following is my code:
我正在尝试学习 vue.js。我正在添加元素列表，我只想添加class="active"到 for 循环中的第一个元素。以下是我的代码：
<div class="carousel-inner text-center " role="listbox">
<div class="item" v-for="sliderContent in sliderContents">
<h1>{{ sliderContent.title }}</h1>
<p v-html="sliderContent.paragraph"></p>
</div>
</div>
So the first element should look like something this:
所以第一个元素应该是这样的：
<div class="item active">
<h1>WELCOME TO CANVAS</h1>
<p>Create just what you need for your Perfect Website. Choose from a wide<br>range of Elements & simple put them on your own Canvas</p>
</div>
I'm able to get the data so everything is working perfectly fine.
我能够获取数据，因此一切正常。
And following is my script code:
以下是我的脚本代码：
<script>
export default{
data() {
return {
sliderContents: [
{
title: "WELCOME TO CANVAS",
paragraph: "Create just what you need for your Perfect Website. Choose from a wide<br>range of Elements & simple put them on your own Canvas"
},
{
title: "WELCOME TO CANVAS",
paragraph: "Create just what you need for your Perfect Website. Choose from a wide<br>range of Elements & simple put them on your own Canvas"
},
{
title: "WELCOME TO CANVAS",
paragraph: "Create just what you need for your Perfect Website. Choose from a wide<br>range of Elements & simple put them on your own Canvas"
},
{
title: "WELCOME TO CANVAS",
paragraph: "Create just what you need for your Perfect Website. Choose from a wide<br>range of Elements & simple put them on your own Canvas"
}
]
}
}
}
Help me out.
帮帮我。
回答by Wing
const TextComponent = {
template: `
<p>{{ text }}</p>
`,
props: ['text'],
};
new Vue({
components: {
TextComponent,
},
template: `
<div>
<text-component
v-for="(item, index) in items"
:class="{ 'active': index === 0 }"
:text="item.text">
</text-component>
</div>
`,
data: {
items: [
{ text: 'Foo' },
{ text: 'Bar' },
{ text: 'Baz' },
],
},
}).$mount('#app');.active {
background-color: red;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
</head>
<body>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
</body>
</html>Above is a snippet demonstrating a solution to your problem. Here's an outline of it:
以上是一个片段，展示了您的问题的解决方案。这是它的概述：
Inside
v-forblocks we have full access to parent scope properties.v-foralso supports an optional second argument for the index of the current item.
在
v-for块内部，我们可以完全访问父作用域属性。v-for还支持当前项的索引的可选第二个参数。
– https://vuejs.org/v2/guide/list.html#Basic-Usage
– https://vuejs.org/v2/guide/list.html#Basic-Usage
The v-fordirective has a second argument giving you the index of the item.
该v-for指令有第二个参数，为您提供项目的索引。
v-for="(item, index) in items"
Since you want the activeclass on the first item you can use an expression testing if the indexis 0and bind it to the class attribute.
由于您希望active第一个项目上的类，您可以使用表达式测试是否index是0并将其绑定到类属性。
:class="{ 'active': index === 0 }"
回答by Brane
The easiest solution is to check every element if indexis equal to 0 and then setting the activeclass (or the class you needed). Here is the code of class definition:
最简单的解决方案是检查每个元素是否index等于 0，然后设置active类（或您需要的类）。下面是类定义的代码：
:class="{ 'active': index === 0 }"
Here is working example of making Bootstrap Tabs:
这是制作的工作示例Bootstrap Tabs：
<ul class="nav nav-tabs tab-nav-right" role="tablist">
<li role="presentation" :class="{ 'active': index === 0 }" v-for="(value, index) in some_array" v-bind:key="index">
{{some_array[index]}}
</li>
</ul>
Also, if you have multiple classes you can mix them like this:
另外，如果你有多个类，你可以像这样混合它们：
:class="['tab-pane fade', (index === 0 ? 'active in' : 'something_else')]"
