Maison > interface Web > Voir.js > Comment vue.js traverse un tableau

Comment vue.js traverse un tableau

coldplay.xixi
Libérer: 2020-11-26 15:24:01
original
12997 Les gens l'ont consulté

Méthode Vue.js pour parcourir les tableaux : 1. Utilisez une boucle foreach, le code est [this.urls.forEach(item =>] ; 2. Utilisez une boucle de filtre, le code est [retourner ceci .urls.filter (item =>】.

Comment vue.js traverse un tableau

  • Cette méthode convient à toutes les marques d'ordinateurs

Méthode Vue.js pour parcourir les tableaux :

1, foreach

La boucle foreach ne peut pas utilisez return pour arrêter la boucle

search(keyword){
    var newList = []
    this.urls.forEach(item =>{
     if(item.name.indexOf(keyword) != -1){
      newList.push(item)
     }
    })
    return newList
   }
Copier après la connexion

2, filter

L'objet item est un élément du tableau parcouru, inclut est une nouvelle méthode dans es6, et le nouveau tableau est renvoyé directement dans la méthode de recherche

search(keyword){
    return this.urls.filter(item =>{
     if(item.name.includes(keyword)){
      return item
   }
 })
}
Copier après la connexion

3 🎜>findIndex

Si la correspondance est réussie, retournez true et sortez d'une boucle

.

del(row){
     this.$confirm("确定要删除吗?", "删除").then(action=>{
     var index = this.urls.findIndex(item =>{
      if(item.name == row.name){
       return true;
      }
     })
     this.urls.splice(index, 1)
});
Copier après la connexion

5. Dans l'exemple ci-dessus, stockez un tableau fixe dans une vue data et parcourez le tableau, implémentez la fonction de recherche, supprimez la fonction

Dans el-table : liez une méthode dans data, dans laquelle le les URL de tableau fixes sont parcourues et un nouveau tableau est renvoyé pour implémenter la fonction de recherche some

del(row){
    this.$confirm("确定要删除吗?", "删除").then(action=>{
      this.urls.some((item, i) =>{
      if(item.name == row.name){
       this.urls.splice(i, 1)
       return true;
      }
     }) 
  });
}
Copier après la connexion
6 Le rendu est

Recommandations d'apprentissage gratuites associées. :

javascript

(vidéo)

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