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

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

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>

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
      }
  }
}

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!