简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Les classes de style ne sont pas appliquées aux éléments dans VueJS
P粉465287592
P粉465287592 2024-01-16 21:53:49
0
1
403

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粉465287592
P粉465287592

répondre à tous(1)
P粉662614213
P粉6626142132024-01-17 19:38:21 1 plancher

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
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！