J'essaie d'apprendre vue.js. J'ajoute une liste d'éléments, je veux ajouter class="active"
uniquement au premier élément de la boucle for. voici mon code:
<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>
Le premier élément devrait donc ressembler à quelque chose comme ceci:
<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>
Je peux obtenir les données pour que tout fonctionne parfaitement bien.
Et voici mon code de script:
<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"
}
]
}
}
}
Aide moi.
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>
Ci-dessus est un extrait montrant une solution à votre problème. En voici un aperçu:
À l'intérieur
v-for
blocs, nous avons un accès complet aux propriétés de la portée parent.v-for
prend également en charge un deuxième argument facultatif pour l'index de l'élément en cours.
- https://vuejs.org/v2/guide/list.html#Basic-Usage
Le v-for
La directive a un deuxième argument qui vous donne l'index de l'élément.
v-for="(item, index) in items"
Puisque vous voulez la classe active
sur le premier élément, vous pouvez utiliser une expression testant si la index
est 0
et le lier à l'attribut class.
:class="{ 'active': index === 0 }"
La solution la plus simple consiste à vérifier chaque élément si index
est égal à 0, puis à définir la classe active
(ou la classe dont vous avez besoin). Voici le code de définition de classe:
:class="{ 'active': index === 0 }"
Voici un exemple pratique de création de 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>
De plus, si vous avez plusieurs classes, vous pouvez les mélanger comme ceci:
:class="['tab-pane fade', (index === 0 ? 'active in' : 'something_else')]"