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 !
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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...
...ou de cette façon en utilisant la méthode des propriétés calculées (décrite ci-dessous.)
--
Message original :
getClass当定义为方法时需要被调用，并且返回值（"testcolor"）被设置为 :class 的值。请注意函数调用getClass()代替您使用的getClass.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
testClassdépend de la propriété réactivetestvalue代码>.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() "). 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. 🎜:class="testClass"和 NOT:class ="testClass()":class="testClass" et NOT