Comment trouver la somme des éléments dans vue

Vue.js est un framework JavaScript qui utilise le modèle MVVM pour créer des applications Web évolutives. Vue.js permet aux développeurs de gérer facilement les interactions entre les données et l'interface utilisateur et fournit de nombreuses directives et composants intégrés utiles.

Dans les applications Vue.js, il est souvent nécessaire d'effectuer des calculs sur des éléments de la page, comme des sommes, des moyennes, etc. Cet article explique comment utiliser Vue.js pour calculer la somme des éléments.

1. Liaison de données

Dans Vue.js, utilisez la liaison de données pour associer des éléments de page aux données dans une instance Vue.js. Nous pouvons utiliser la directive v-model pour lier les contrôles d'entrée aux données et utiliser des expressions d'interpolation {{}} pour afficher les données sur la page. Par exemple :

<template>
  <div>
    <label>数值1:</label>
    <input type="number" v-model="num1">
    <br>
    <label>数值2:</label>
    <input type="number" v-model="num2">
    <br>
    <label>数值3:</label>
    <input type="number" v-model="num3">
    <br>
    <label>数值4:</label>
    <input type="number" v-model="num4">
    <br>
    <label>总和:</label>
    <span>{{ sum }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: 0,
      num2: 0,
      num3: 0,
      num4: 0,
    }
  },
  computed: {
    sum() {
      return parseInt(this.num1) + parseInt(this.num2) + parseInt(this.num3) + parseInt(this.num4);
    }
  }
}
</script>

Dans le code ci-dessus, nous définissons un composant Vue.js, qui contient 4 zones de saisie et une zone de sortie. Chaque zone de saisie est liée à un élément de données dans l'instance Vue.js, et nous utilisons la propriété calculée pour calculer la somme et afficher le résultat sur la page.

2. Propriétés calculées

Les propriétés calculées sont une fonctionnalité très utile dans Vue.js qui nous permet de définir des propriétés dérivées basées sur d'autres données. Les propriétés calculées peuvent être mises en cache et recalculées uniquement lorsque les données associées changent. Pour les attributs qui doivent fréquemment être calculés, l'utilisation d'attributs calculés peut améliorer les performances et éviter des calculs répétés. Nous pouvons utiliser des propriétés calculées pour calculer la somme des éléments, par exemple :

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item }} 
      </li>
    </ul>
    <label>总和:</label>
    <span>{{ sum }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [1, 2, 3, 4]
    }
  },
  computed: {
    sum() {
      return this.items.reduce(function (total, num) {
        return total + num;
      }, 0);
    }
  }
}
</script>

Dans le code ci-dessus, nous définissons les éléments d'un tableau et utilisons la directive v-for pour les restituer dans une liste non ordonnée. Nous utilisons la propriété calculée pour calculer la somme et la méthode de réduction pour accumuler tous les éléments du tableau.

3. Utiliser des méthodes

Les propriétés calculées peuvent être utilisées dans des modèles, mais si nous devons effectuer certaines opérations dans l'instance Vue.js et renvoyer les résultats calculés, nous pouvons utiliser des méthodes. Les méthodes ne sont pas mises en cache et sont recalculées à chaque appel. Elles peuvent donc ne pas être aussi efficaces que les propriétés calculées. Par exemple :

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item }} 
      </li>
    </ul>
    <label>总和:</label>
    <span>{{ getSum() }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [1, 2, 3, 4]
    }
  },
  methods: {
    getSum() {
      return this.items.reduce(function (total, num) {
        return total + num;
      }, 0);
    }
  }
}
</script>

Dans le code ci-dessus, nous définissons une méthode getSum(), utilisons la méthode réduire pour calculer la somme des éléments, l'appelons dans le modèle et générons le résultat.

Conclusion

En général, vous pouvez utiliser la liaison de données, les propriétés calculées et les méthodes pour trouver la somme des éléments dans une application Vue.js. Choisissez simplement la méthode appropriée en fonction de la situation spécifique. Vue.js fournit un moyen très pratique de gérer l'interaction entre les données et l'interface utilisateur, nous permettant de nous concentrer davantage sur la mise en œuvre de la logique métier. Grâce à l'introduction de cet article, je pense que les lecteurs ont une compréhension plus approfondie de Vue.js pour trouver la somme des éléments.

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!