Maison > interface Web > js tutoriel > le corps du texte

Que sont les propriétés calculées de vue.js ? (exemple de code)

藏色散人
Libérer: 2019-04-25 14:15:36
original
2881 Les gens l'ont consulté


Dans cet article, nous vous présenterons les propriétés calculées dans Vue à travers des exemples spécifiques.

Que sont les propriétés calculées de vue.js ? (exemple de code)

Qu'est-ce qu'une propriété calculée ?

Les propriétés calculées ressemblent à des propriétés de données dans Vue Mais nous pouvons effectuer des opérations arithmétiques et non. -tâches arithmétiques.

<template>
  <ul>
   <li>First name : {{firstName}}</li>
   <li>Last name : {{lastName}}</li>
   <li>Full name : {{firstName + &#39; &#39;+ lastName}}</li>
  </ul>
</template>

<script>
 data:function(){
     return{
         firstName: "Sai",
         lastName: "Gowtham"
     }
 }
</script>
Copier après la connexion

Dans le code ci-dessus, nous créons deux attributs de données firstName et lastName et les insérons dans le modèle.

Si vous regardez notre modèle, nous avons ajouté la logique du nom complet entre {{}} accolades.

Exemple

Exemple de comment créer votre première propriété calculée.

Les propriétés calculées sont déclarées dans un objet de propriété calculée.

<template>
  <ul>
   <li>First name : {{firstName}}</li>
   <li>Last name : {{lastName}}</li>
   <!-- 计算属性 -->
   <li>Full name : {{fullName}}</li>
  </ul>
</template>

<script>
export default{
     data:function(){
     return{
         firstName: "Sai",
         lastName: "Gowtham"
     }
  },
  computed:{
      fullName:function(){
          return this.firstName+&#39; &#39;+this.lastName
      }
  }
}
Copier après la connexion

Ici, nous avons ajouté une propriété calculée appelée fullName, qui est une fonction qui renvoie le nom complet de l'utilisateur.

Nous pouvons utiliser des propriétés calculées dans des modèles, tout comme les propriétés des données.

Les propriétés calculées sont mises en cache par vue, donc elle ne réévalue la logique que lorsque la propriété de données sous-jacente change, ce qui signifie que si firstName ou lastName n'a pas changé, alors elle renvoie simplement le résultat précédemment calculé sans réexécuter la fonction .

Recommandations associées : "Tutoriel javascript"


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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal