vue.js如何遍历数组

coldplay.xixi
풀어 주다: 2020-11-26 15:24:01
원래의
12857명이 탐색했습니다.

vue.js遍历数组的方法:1、使用foreach循环,代码为【this.urls.forEach(item =>】;2、使用filter循环,代码为【return this.urls.filter(item =>】。

vue.js如何遍历数组

  • 该方法适用于所有品牌电脑

vue.js遍历数组的方法:

1、foreach

  foreach循环对不能使用return来停止循环

search(keyword){
    var newList = []
    this.urls.forEach(item =>{
     if(item.name.indexOf(keyword) != -1){
      newList.push(item)
     }
    })
    return newList
   }
로그인 후 복사

2、filter

  item对象就是遍历数组中的一个元素,includes是es6中的新方法,在search方法中直接返回新数组

search(keyword){
    return this.urls.filter(item =>{
     if(item.name.includes(keyword)){
      return item
   }
 })
}
로그인 후 복사

3、findIndex

  返回true后index就可以获取到匹配的元素在进行删除

del(row){
     this.$confirm("确定要删除吗?", "删除").then(action=>{
     var index = this.urls.findIndex(item =>{
      if(item.name == row.name){
       return true;
      }
     })
     this.urls.splice(index, 1)
});
로그인 후 복사

4、some

  如果匹配成功就return true跳出some的循环

del(row){
    this.$confirm("确定要删除吗?", "删除").then(action=>{
      this.urls.some((item, i) =>{
      if(item.name == row.name){
       this.urls.splice(i, 1)
       return true;
      }
     }) 
  });
}
로그인 후 복사

5、上例子,在一个vue的data中存入一个固定的数组,对数组进行遍历,实现搜索功能,删除功能

  在el-table中 :data中绑定一个方法,方法中对固定的数组urls进行遍历,返回一个新的数组实现搜索功能



로그인 후 복사

6、效果图为

159bea2cb6e6e7665ea40c081d59b59.png

相关免费学习推荐:javascript(视频)

위 내용은 vue.js如何遍历数组의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!