recherche

Maison  >  Questions et réponses  >  le corps du texte

Les classes de style ne sont pas appliquées aux éléments dans VueJS

Je souhaite donc appliquer la classe .testcolor au div lorsque la valeur de test est vraie et ne rien appliquer lorsque la valeur de test est fausse.

Lorsque j'ajoute la méthode getClass à :class, elle n'est même pas appelée, mais le fait lorsqu'elle est appelée depuis {{ getClass }} . J'ai essayé de vider le cache et même de réécrire tout le code mais cela ne fonctionne toujours pas ! Le code complet est le suivant : 

<!DOCTYPE html>
<html>
    <head>
        <title>Vue Test</title>
        <style>
            .testcolor {
                color: red !important;
            }
        </style>
    </head>
    <body>
        <div id="test" :class="getClass">
            <h1>Test stuff</h1>
            <h2>{{ testvalue }}</h2>
        </div>
        <script type="module">
            import { createApp } from "https://unpkg.com/vue@3.2.19/dist/vue.esm-browser.js";

            createApp({
                data() {
                    return {
                        testvalue: true,
                    };
                },
                methods: {
                    getClass() {
                        console.log("Method 'getClass' called");
                        return this.testvalue ? "testcolor" : "";
                    },
                },
            }).mount("#test");
        </script>
    </body>
</html>

J'ai trouvé que si je monte l'instance Vue sur l'élément div et que j'ajoute :class="testClass" (de la réponse) au h2, cela fonctionne ! Mais quand je l'installe sur l'élément h2 ça ne marche pas !

P粉465287592P粉465287592317 Il y a quelques jours457

répondre à tous(1)je répondrai

  • P粉662614213

    P粉6626142132024-01-17 19:38:21

    Modifier en fonction de votre commentaire @martin0300

    Tout d'abord, vous devez envelopper cette partition dans une autre partition dont l'identifiant doit être test . Vue ne considère pas l'élément conteneur (le div avec l'identifiant test) comme faisant partie de l'application et ne gère aucune directive. Les références le mentionnant sont laissées ci-dessous.

    https://vuejs.org/guide/essentials/application .html#Installer l'application

    Alors changez votre balisage en quelque chose comme ceci pour appliquer la valeur de la méthode getClass...

    
    
    
        
    Test stuff
    
        
    {{ testvalue }}

    ...ou de cette façon en utilisant la méthode des propriétés calculées (décrite ci-dessous.) 

    
    
    
        
    Test stuff
    
        
    {{ testvalue }}

    --

    Message original :

    getClass 当定义为方法时需要被调用，并且返回值（"testcolor"）被设置为 :class 的值。请注意函数调用 getClass() 代替您使用的 getClass. 

    
    
    Test stuff
    
    
    {{ testvalue }}

    Cela dit, ce n’est pas la manière privilégiée d’appliquer les cours de manière conditionnelle. Nous préférons les propriétés calculées aux méthodes. Une méthode est appelée à chaque rendu, alors qu'une propriété calculée n'est recalculée que lorsque les données réactives sous-jacentes dont elle dépend changent (dans ce cas, la propriété calculée testClass dépend de la propriété réactive testvalue.

    Le code Vue idiomatique dans votre cas est le suivant. Notez que les propriétés calculées ne sont pas appelées comme des fonctions car elles sont implémentées en interne à l'aide de méthodes d'accès/à l'aide de proxys JS (:class="testClass" 和 NOT :class ="testClass()":class="testClass" et NOT

     : class ="testClass() "). Je pense que la différence entre la façon dont les méthodes et les propriétés calculées sont utilisées est la cause de votre confusion. 🎜 
    
    
    Test stuff
    
    
    {{ testvalue }}
    

    
sssccc

    répondre
    0
  • Annulerrépondre