La différence entre la méthode et calculé dans Vue
Cette fois, je vais vous présenter la différence entre méthode et calculé dans Vue. Quelles sont les précautions lors de l'utilisation de méthode et calculé dans Vue. Voici des cas pratiques, jetons un coup d'œil.
Les calculs et les méthodes dans les paramètres de configuration du nouveau Vue peuvent gérer une grande quantité de code logique, mais quand utiliser quel attribut, vous devez distinguer soigneusement pour utiliser vue correctement.
calculé est appelé un attribut calculé. Comme son nom l'indique, le calcul doit renvoyer un résultat de calcul. Par conséquent, lorsque nous avons besoin de traiter beaucoup de logique, mais que nous voulons finalement obtenir le résultat final, nous le faisons. can use Computed;
Afin d'illustrer la différence entre méthode et calculé, je voudrais d'abord jeter un œil à ce que dit l'attribut calculé sur le site officiel de Vue : Expressions dans les modèles. sont très pratiques, mais ils ne sont en réalité utilisés que pour des calculs simples. Mettre trop de logique dans un modèle peut le rendre trop lourd et difficile à maintenir.
Regardons un exemple :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="javascript/vue.min.js"></script>
</head>
<body>
<p id="app">
//直接在模板中绑定表达式
<p>{{message.split('').reverse().join('')}}</p>
//运用计算属性
<p>message反转之后的结果:{{reverseMessage}}</p>
</p>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"hello"
},
computed:{
reverseMessage:function(){
return this.message.split('').reverse().join('');
}
}
})
</script>
</body>
</html>Dans le cas ci-dessus, le modèle n'est plus simple et clair. Il faut confirmer une seconde fois avant de se rendre compte qu'il s'agit d'un message inversé. Le problème s'aggrave lorsque vous souhaitez afficher le message à l'envers plusieurs fois dans le modèle. C'est pourquoi, pour toute logique complexe, vous devez utiliser des propriétés calculées. Ci-dessous, j'utiliserai la méthode et le calcul pour comparer :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="javascript/vue.min.js"></script>
</head>
<body>
<p id="app">
<p>{{message}}</p>
//直接在模板中绑定表达式
<p>{{message.split('').reverse().join('')}}</p>
//运用计算属性
<p>{{reverseMessage}}</p>
//运用methods方式
<p>{{methodMessage()}}</p>
</p>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"hello"
},
computed:{
reverseMessage:function(){
return this.message.split('').reverse().join('');
}
},
methods:{
methodMessage:function () {
return this.message.split('').reverse().join('');
}
}
})
</script>
</body>
</html>Je compare ces deux méthodes. Le résultat renvoyé est le même, mais dans la méthode de calcul des attributs calculés, vous n'avez pas besoin d'ajouter () lors de l'utilisation d'attributs, tandis que la méthode méthodes doit être utilisée comme des méthodes lors de son utilisation, et vous devez ajouter ().
Les deux méthodes sont également très différentes en caching. L'attribut calculé est utilisé pour lier le reverseMessage au message. Le reverseMessage ne sera déclenché que lorsque le message change, alors que la méthode méthodes le nécessite. chaque fois que la page est saisie, exécutez cette méthode, mais lorsque vous utilisez des informations en temps réel, telles que l'affichage de l'heure actuelle d'entrée dans la page, vous devez utiliser des méthodes.
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php. !
Lecture recommandée :
Affichage de la requête http et du chargement dans Vue2.0
Comment Vue2.0 réalise-t-il la liaison bidirectionnelle des données des composants
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
La différence entre le multithreading et le C # asynchrone
Apr 03, 2025 pm 02:57 PM
La différence entre le multithreading et l'asynchrone est que le multithreading exécute plusieurs threads en même temps, tandis que les opérations effectuent de manière asynchrone sans bloquer le thread actuel. Le multithreading est utilisé pour les tâches à forte intensité de calcul, tandis que de manière asynchrone est utilisée pour l'interaction utilisateur. L'avantage du multi-threading est d'améliorer les performances informatiques, tandis que l'avantage des asynchrones est de ne pas bloquer les threads d'interface utilisateur. Le choix du multithreading ou asynchrone dépend de la nature de la tâche: les tâches à forte intensité de calcul utilisent le multithreading, les tâches qui interagissent avec les ressources externes et doivent maintenir la réactivité de l'interface utilisateur à utiliser asynchrone.
La différence entre char et wchar_t dans le langage C
Apr 03, 2025 pm 03:09 PM
Dans le langage C, la principale différence entre Char et WCHAR_T est le codage des caractères: Char utilise ASCII ou étend ASCII, WCHAR_T utilise Unicode; Char prend 1 à 2 octets, WCHAR_T occupe 2-4 octets; Char convient au texte anglais, WCHAR_T convient au texte multilingue; Le char est largement pris en charge, WCHAR_T dépend de la prise en charge du compilateur et du système d'exploitation Unicode; Le char est limité dans la gamme de caractères, WCHAR_T a une gamme de caractères plus grande et des fonctions spéciales sont utilisées pour les opérations arithmétiques.
Quelle est la fonction de la somme du langage C?
Apr 03, 2025 pm 02:21 PM
Il n'y a pas de fonction de somme intégrée dans le langage C, il doit donc être écrit par vous-même. La somme peut être obtenue en traversant le tableau et en accumulant des éléments: Version de boucle: la somme est calculée à l'aide de la longueur de boucle et du tableau. Version du pointeur: Utilisez des pointeurs pour pointer des éléments de tableau, et un résumé efficace est réalisé grâce à des pointeurs d'auto-incitation. Allouer dynamiquement la version du tableau: allouer dynamiquement les tableaux et gérer la mémoire vous-même, en veillant à ce que la mémoire allouée soit libérée pour empêcher les fuites de mémoire.
Quelles sont les exigences de base pour les fonctions de langue C
Apr 03, 2025 pm 10:06 PM
Les fonctions de langue C sont la base de la modularisation du code et de la construction de programmes. Ils se composent de déclarations (en-têtes de fonction) et de définitions (corps de fonction). Le langage C utilise des valeurs pour transmettre les paramètres par défaut, mais les variables externes peuvent également être modifiées à l'aide d'adresse Pass. Les fonctions peuvent avoir ou ne pas avoir de valeur de retour et le type de valeur de retour doit être cohérent avec la déclaration. La dénomination de la fonction doit être claire et facile à comprendre, en utilisant un chameau ou une nomenclature de soulignement. Suivez le principe de responsabilité unique et gardez la simplicité de la fonction pour améliorer la maintenabilité et la lisibilité.
Quelle est la différence entre char et char non signé
Apr 03, 2025 pm 03:36 PM
Le char et le char non signé sont deux types de données qui stockent les données des caractères. La principale différence est le moyen de gérer les nombres négatifs et positifs: plage de valeur: char signé (-128 à 127), et Char non signé Unsigned (0 à 255). Traitement du nombre négatif: le char peut stocker des nombres négatifs, le char non signé ne peut pas. Mode bit: Char le bit le plus élevé représente le symbole, un bit non signé non signé. Opérations arithmétiques: le char et le char non signé sont signés et non signés, et leurs opérations arithmétiques sont différentes. Compatibilité: char et char non signé
La différence entre H5 et mini-programmes et applications
Apr 06, 2025 am 10:42 AM
H5. La principale différence entre les mini programmes et l'application est: Architecture technique: H5 est basé sur la technologie Web, et les mini-programmes et l'application sont des applications indépendantes. Expérience et fonctions: H5 est légère et facile à utiliser, avec des fonctions limitées; Les mini-programmes sont légers et ont une bonne interactivité; Les applications sont puissantes et ont une expérience fluide. Compatibilité: H5 est compatible multiplateforme, les applets et les applications sont limités par la plate-forme. Coût de développement: H5 a un faible coût de développement, des mini-programmes moyens et une application la plus élevée. Scénarios applicables: H5 convient à l'affichage d'informations, les applets conviennent aux applications légères et les applications conviennent aux fonctions complexes.
Quelles sont les différences et les connexions entre C et C #?
Apr 03, 2025 pm 10:36 PM
Bien que C et C # aient des similitudes, ils sont complètement différents: C est une gestion manuelle de la mémoire manuelle et un langage dépendant de la plate-forme utilisé pour la programmation système; C # est un langage orienté objet, des ordures et un langage indépendant de la plate-forme utilisé pour le bureau, l'application Web et le développement de jeux.
Comment utiliser XPath pour rechercher à partir d'un nœud DOM spécifié en JavaScript?
Apr 04, 2025 pm 11:15 PM
Explication détaillée de la méthode de recherche XPATH sous les nœuds DOM en JavaScript, nous devons souvent trouver des nœuds spécifiques de l'arbre Dom basé sur les expressions XPath. Si vous avez besoin de ...
