Comment mettre de la classe=“active” à premier élément vuejs pour la boucle

Je suis en train d'apprendre vue.js. Je suis l'ajout d'une liste d'éléments, je veux ajouter class="active" seulement le 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>

Ainsi, le premier élément devrait ressembler à quelque chose:

<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 suis en mesure d'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"
                }
            ]
        }
    }
}

M'aider.

v-pour="(index, sliderContent) dans sliderContents", puis utiliser une instruction if pour ajouter la classe sur l'index 0 ou 1. TBH je ne sais pas vue mais c'est ce que vous allez Angulaire.

InformationsquelleAutor Nitish Kumar | 2017-02-27

28

JS:
```
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');
```
CSS:
```
.active {
  background-color: red;
}
```
HTML:
```
<!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 de la démonstration d'une solution à votre problème. Voici un aperçu de celui-ci:

À l'intérieur de v-for blocs, nous avons un accès complet à portée parent propriétés. v-for prend également en charge un deuxième argument optionnel pour l'index de l'élément courant.

– https://vuejs.org/v2/guide/list.html#Basic-Usage

La v-for directive a un deuxième argument en vous donnant l'index de l'élément.
```
v-for="(item, index) in items"
```
Puisque vous voulez le active classe sur le premier élément, vous pouvez utiliser une expression de tester si la index est 0 et le lier à la classe de l'attribut.
```
:class="{ 'active': index === 0 }"
```
- Qu'advient-il si l'index est une chaîne de caractères au lieu d'un nombre? Comment puis-je obtenir le même résultat?
- Je suppose que vous êtes une itération sur un objet par opposition à un tableau si votre index est une chaîne de caractères. Lors de l'itération sur un objet avec v-for la index argument est en troisième position (v-for="(value, key, index) in object". Vous pouvez utiliser cet argument dans l'expression lié à l'attribut de classe de tester si l'élément est le premier. Mais notez: lors de l'itération sur un objet, l'ordre est basé sur la clé de l'énumération de l'ordre de Object.keys(), ce qui n'est pas garanti d'être cohérente dans le moteur JavaScript implémentations.
- Sinon, vous pouvez faire une affirmation contre la key, par opposition à la index. La directive devrait ressembler: v-for="(value, key) in object". Et la classe de liaison: :class="{ 'active': key === 'YOUR_STRING' }".
- Merci, oui, c'est ce que j'ai fait.
InformationsquelleAutor Wing

La solution la plus simple est de vérifier chaque élément si index est égal à 0, puis le réglage de la active de la classe (ou la classe nécessaire). Voici le code de définition de classe:

:class="{ 'active': index === 0 }"

Voici de travail exemple de faire de la 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>

Aussi, si vous avez plusieurs classes, vous pouvez les mélanger comme ceci:

:class="['tab-pane fade', (index === 0 ? 'active in' : 'something_else')]"

InformationsquelleAutor Brane

Vous devez vous connecter pour publier un commentaire.