2
votes

Comment ajouter plusieurs classes à un élément basé sur des accessoires en utilisant Vue.js?

Commencez par regarder mon code pour comprendre le problème.

<template>
    <div class="header" 
        :class="flat ? 'flat' : null"
        :class="app ? 'app' : null">
    </div>
</template>

<script>
    export default {
        props: {
            flat: {
                type: Boolean,
                default: false
            },
            app: {
                type: Boolean,
                default: false
            }
        }
    }
</script>

<style lang="scss">
    .header {
        width: 100%;
        height: 55px;
        background: white;
        box-shadow: 0px 3px 6px #ccc;
        transition: .8s ease-in-out;

    }
    .flat {
        box-shadow: none;
    }
    .app {
        padding-left: 10%;
        padding-right: 10%;
    }

</style>

comme vous pouvez le voir ici, ai-je mon accessoire plat qui déclenchera une classe plate pour afficher une boîte-ombre ou non . Mais je veux aussi que quelqu'un déclenche le prop d'application qui mettra un peu de remplissage dans l'en-tête.

le problème ici est que vous ne pouvez pas mettre plusieurs: classes dans un élément. y a-t-il une solution à cela?

javascript html css vue.js vuejs2

1 commentaires

Consultez la documentation: vuejs.org/v2/guide/class-and-style. html

3 Réponses :

3
votes

Essayez de les combiner dans le même attribut de classe comme suit:

<div class="header"
  :class="{ 'flat':flat,'app' : app}"
>header</div>

Voir le documentation officielle

0 commentaires

1
votes

Vous pouvez créer une méthode qui renvoie le même objet que la réponse @Boussadjra Barhim.

setClass: function(flat, app){
    //do something else with inputs here
    return {
      flat: flat, 
      app: app
    }
}

Utilisez-la via

<element :class="setClass(flat, app)" />

Mais dans dans ce cas, vous pouvez écrire un autre code plus long (sans modifier le modèle) pour traiter les valeurs avant de renvoyer un objet

//if value is evaluated into true, the key will be a part of the class
setClass: function(flat, app){
    return {
      flat: flat, 
      app: app
    }
}

0 commentaires

4
votes

Il existe plusieurs façons de réaliser ce que vous essayez de faire, Vue est excellent pour cela.

1. Passez un tableau de classes

<div 
  class="header" 
  :class="[{flat, app}, someOtherClass]"
></div>

2. Passez un objet

<div 
  class="header" 
  :class="{flat, app}"
></div>

Ici, seuls les accessoires qui ont une valeur de vérité seront définis comme classes.

2.1 Si vous utilisez ES6 Vous pouvez utiliser le raccourci de la valeur de propriété de l'objet

<div 
  class="header" 
  :class="{flat: flat, app: app}"
></div>

Bonus

Vous pouvez également mélanger 1 et 2 si nécessaire (je ' j'en ai parfois besoin)

<div 
  class="header" 
  :class="[flat ? 'flat' : null, "app ? 'app' : null"]"
></div>

0 commentaires