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

Comment vue.js traverse un tableau

coldplay.xixi
coldplay.xixioriginal
2020-11-26 15:24:0112913parcourir

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
   }

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

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

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;
      }
     }) 
  });
}
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!

Déclaration:
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