Vue définit la méthode du tableau

Vue.js est un framework JavaScript très populaire, largement utilisé dans le développement d'applications monopage, l'écriture de composants, etc. Dans Vue.js, un tableau est une structure de données couramment utilisée qui peut nous aider à gérer une logique de données complexe. Ci-dessous, nous présenterons les méthodes de tableau couramment utilisées dans Vue.js. La méthode

1. push()

push() peut ajouter un ou plusieurs éléments au tableau et renvoyer la nouvelle longueur du tableau. Par exemple, définir un tableau dans Vue.js :

data(){
  return {
    colors: ['red', 'green', 'blue']
  }
}

Nous pouvons utiliser la méthode push() pour ajouter un nouvel élément au tableau :

methods: {
  addColor() {
    this.colors.push('yellow');
  }
}

Ici nous définissons une méthode addColor(), et à chaque fois que cette méthode est appelée , Ajoute un nouvel élément de couleur (« jaune ») au tableau. La méthode

2. pop()

pop() peut supprimer le dernier élément du tableau. Par exemple, en définissant un tableau dans Vue.js :

data() {
  return {
    fruits: ['apple', 'banana', 'orange']
  }
}

Nous pouvons utiliser la méthode pop() pour supprimer le dernier élément du tableau :

methods: {
  removeFruit() {
    this.fruits.pop();
  }
}

Ici, nous définissons une méthode removeFruit(). Chaque fois que cette méthode est appelée, Supprimez le dernier élément du tableau. La méthode

3. unshift()

unshift() peut ajouter un ou plusieurs éléments au début du tableau et renvoyer la nouvelle longueur du tableau. Par exemple, définir un tableau dans Vue.js :

data() {
  return {
    numbers: [3, 4, 5]
  }
}

On peut utiliser la méthode unshift() pour ajouter un nouvel élément au début du tableau :

methods: {
  addNumber() {
    this.numbers.unshift(2);
  }
}

Ici on définit une méthode addNumber(), à chaque fois cette méthode est appelé, les deux ajoutent un nouveau nombre (2) au début du tableau. La méthode

4. shift()

shift() peut supprimer un élément du début du tableau et renvoyer la valeur de l'élément. Par exemple, définir un tableau dans Vue.js :

data() {
  return {
    cars: ['BMW', 'Audi', 'Mercedes']
  }
}

On peut utiliser la méthode shift() pour supprimer un élément du début du tableau :

methods: {
  removeCar() {
    this.cars.shift();
  }
}

Ici on définit une méthode removeCar(), et à chaque fois cette méthode est appelé, supprimez le premier élément (« BMW ») du tableau. La méthode

5. slice()

slice() peut renvoyer un nouveau tableau contenant les éléments sélectionnés dans le tableau d'origine. Par exemple, définir un tableau dans Vue.js :

data() {
  return {
    animals: ['dog', 'cat', 'lion', 'tiger', 'monkey']
  }
}

Nous pouvons utiliser la méthode slice() pour renvoyer un nouveau tableau commençant par le deuxième élément (indice 1) du tableau d'origine et se terminant par le quatrième élément (indice 3) Fin :

computed: {
  selectedAnimals() {
    return this.animals.slice(1, 4);
  }
}

Ici, nous définissons une propriété calculée qui renvoie un nouveau tableau contenant les éléments sélectionnés dans le tableau d'origine ("cat", "lion" et "tigre"). La méthode

6. splice()

splice() peut ajouter ou supprimer un ou plusieurs éléments à un tableau. Par exemple, définir un tableau dans Vue.js :

data() {
   return {
    cities: ['New York', 'London', 'Paris', 'Tokyo']
  }
}

Nous pouvons utiliser la méthode splice() pour ajouter un nouvel élément au tableau :

methods: {
  addCity() {
    this.cities.splice(2, 0, 'Shanghai');
  }
}

Ici, nous définissons une méthode addCity(), qui spécifie d'abord à partir de l'index 2 Effectuez une opération splice(), puis déplacez les éléments restants vers l'arrière et ajoutez un nouvel élément (« Shanghai ») à l'index 2.

En même temps, nous pouvons également utiliser la méthode splice() pour supprimer un élément du tableau :

methods: {
  removeCity() {
    this.cities.splice(1, 1);
  }
}

Ici, nous définissons une méthode removeCity(), qui commence à l'index 1 et supprime un élément ("London") .

Conclusion :

Ce qui précède sont les méthodes de tableau couramment utilisées dans Vue.js. Comprendre ces méthodes peut nous aider à écrire des applications Vue.js plus efficacement. Bien sûr, il existe de nombreuses autres méthodes de tableau, vous pouvez consulter la documentation vous-même si nécessaire.

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!