Comment trier un tableau en utilisant le tri dans Vue-Voir.js-php.cn

Comment trier un tableau en utilisant le tri dans Vue

王林

Libérer： 2024-02-18 17:40:07

original

846 Les gens l'ont consulté

Comment trier un tableau en utilisant le tri dans Vue

Comment utiliser le tri dans vue, vous avez besoin d'exemples de code spécifiques

Vue.js est un framework frontal populaire qui fournit de nombreuses méthodes et instructions pratiques pour traiter les données. L'une des exigences courantes est de trier les tableaux, et la méthode de tri de Vue.js peut très bien répondre à cette exigence. Cet article explique comment utiliser la méthode de tri de Vue.js pour trier un tableau et fournit des exemples de code spécifiques.

Tout d'abord, nous devons créer une instance Vue et définir un tableau dans son option data. Supposons que notre tableau soit un tableau non ordonné contenant des nombres, comme indiqué ci-dessous :

new Vue({
  el: '#app',
  data: {
    numbers: [5, 2, 8, 1, 9]
  }
})

Copier après la connexion

Ensuite, nous pouvons utiliser la méthode de tri dans la méthode de l'instance Vue pour trier le tableau. La méthode de tri est une méthode d'objets tableau natifs JavaScript. Elle peut accepter une fonction de comparaison comme paramètre de tri. Dans l'option méthodes de l'instance Vue, nous pouvons définir une méthode sortArray pour trier le tableau.

new Vue({
  el: '#app',
  data: {
    numbers: [5, 2, 8, 1, 9]
  },
  methods: {
    sortArray: function() {
      this.numbers.sort(function(a, b) {
        return a - b;
      });
    }
  }
})

Copier après la connexion

Dans la méthode sortArray, nous utilisons les règles de tri de JavaScript pour comparer les éléments du tableau. Si a est inférieur à b, la méthode de tri renverra une valeur négative, de sorte que a soit classé devant b ; si a est supérieur à b, la méthode de tri renverra une valeur positive, de sorte que a soit classé derrière b ; b. Par conséquent, un tri ascendant peut être réalisé en renvoyant a - b;.

Dans l'instance Vue, nous pouvons appeler la méthode sortArray en utilisant la directive v-on dans le modèle HTML pour déclencher l'opération de tri du tableau. Par exemple, nous pouvons appeler la méthode sortArray sur l'événement de clic d'un bouton.

<div id="app">
  <button v-on:click="sortArray">排序数组</button>
  <ul>
    <li v-for="number in numbers">{{ number }}</li>
  </ul>
</div>

Copier après la connexion

Dans le code ci-dessus, nous utilisons l'instruction v-on pour lier l'événement click au bouton et utilisons la méthode sortArray comme gestionnaire d'événement. Lorsque vous cliquez sur le bouton, la méthode sortArray est appelée pour trier le tableau. Enfin, nous utilisons la directive v-for pour afficher le tableau trié sur la page.

L'exemple de code complet est le suivant :

<!DOCTYPE html>
<html>
<head>
  <title>Vue Sort Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <button v-on:click="sortArray">排序数组</button>
    <ul>
      <li v-for="number in numbers">{{ number }}</li>
    </ul>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        numbers: [5, 2, 8, 1, 9]
      },
      methods: {
        sortArray: function() {
          this.numbers.sort(function(a, b) {
            return a - b;
          });
        }
      }
    })
  </script>
</body>
</html>

Copier après la connexion

Ce qui précède explique comment trier le tableau à l'aide de la méthode de tri de Vue.js et obtenir l'ordre croissant du tableau en déclenchant l'événement de clic sur le bouton. Grâce à cet exemple, vous pouvez apprendre à utiliser la méthode sort pour trier un tableau dans Vue.js et comprendre comment appeler des méthodes et lier des événements dans une instance Vue. J'espère que cela t'aides!

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!