Vue遍历详解

发布时间：2023-05-22

一、Vue遍历数组

在Vue中，可以使用 v-for 指令遍历数组，如下所示：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in dataArray" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        dataArray: [1, 2, 3, 4]
      }
    }
  }
</script>

上述代码中，使用 v-for 指令遍历了 dataArray 数组，并将每个元素和索引值分别绑定到 item 和 index 变量上，然后在模板中进行展示。需要注意的是，我们需要给每个 v-for 绑定一个唯一的 key 值，以便 Vue 可以更好地跟踪元素的变化。

二、Vue遍历列表 v-for

在实际开发中，我们经常需要从后端获取数据并渲染成列表。在 Vue 中，可以使用 v-for 指令遍历列表数据，如下所示：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in dataList" :key="index">{{ item.name }}</li>
    </ul>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        dataList: []
      }
    },
    mounted () {
      // 从后端获取数据
      const res = await fetch('/api/dataList')
      const data = await res.json()
      this.dataList = data
    }
  }
</script>

上述代码中，使用 v-for 指令遍历了 dataList 数组，并将每个元素以及其索引值分别绑定到 item 和 index 变量上。在 mounted 生命周期中，我们使用 fetch 方法从后端获取数据，并将获取到的数据赋值给 dataList 数组，然后在模板中进行展示。

三、Vue遍历 refs

Vue 中的 ref 属性可以用来给 DOM 元素或子组件注册引用信息。在使用 ref 属性时，我们可以通过 this.$refs 来访问 DOM 元素或子组件。如下所示，使用 v-for 指令就可以遍历所有注册过的 ref 引用：

<template>
  <div ref="box">Box</div>
  <div ref="circle">Circle</div>
  <div ref="triangle">Triangle</div>
</template>
<script>
  export default {
    mounted () {
      // 遍历所有ref引用
      for (const refName in this.$refs) {
        console.log(this.$refs[refName].innerText)
      }
    }
  }
</script>

上述代码中，我们将 ref 属性分别绑定到了三个 div 元素上，然后在 mounted 生命周期中使用 for-in 语句遍历了所有 ref 引用，并输出了各自的 innerText 值。

四、Vue遍历并获取索引

在 Vue 中，通过 v-for 指令遍历数组时，可以使用 v-for="(item, index) in array" 的形式来同时获取数组元素和其索引值。如下所示：

<template>
  <div v-for="(item, index) in dataArray" :key="index">
    <span>{{ index }}.</span>
    <span>{{ item }}</span>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        dataArray: ['A', 'B', 'C', 'D']
      }
    }
  }
</script>

上述代码中，我们使用 v-for 指令遍历了 dataArray 数组，并将每个元素和索引值分别绑定到 item 和 index 变量上。然后在模板中，我们又使用了 index 变量来展示每个元素的索引值。

五、Vue遍历 Map

在 Vue 中，我们也可以使用 Map 对象来作为遍历的目标。下面是一个简单的例子：

<template>
  <div v-for="(value, key) in myMap" :key="key">
    <span>{{ key }}:</span>
    <span>{{ value }}</span>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        myMap: new Map([
          ['name', 'Ben'],
          ['age', 25],
          ['gender', 'male']
        ])
      }
    }
  }
</script>

上述代码中，我们使用 Map 对象来遍历数据，并将每个值和键分别绑定到变量 value 和 key 上。然后在模板中，我们展示了每个键值对。

六、Vue遍历 div 元素

在 Vue 中，我们可以使用 $children 属性来访问子元素列表。通过遍历子元素列表，我们可以轻松地遍历所有的 div 元素，如下所示：

<template>
  <div>
    <div>Box</div>
    <div>Circle</div>
    <div>Triangle</div>
  </div>
</template>
<script>
  export default {
    mounted () {
      // 遍历所有div元素
      const divList = []
      this.$children.forEach(child => {
        if (child.$options.name === 'div') {
          divList.push(child.$el)
        }
      })
      console.log(divList)
    }
  }
</script>

上述代码中，我们通过访问 $children 属性来获取所有子元素，然后使用 forEach 方法遍历所有子元素，并判断其是否为 div 元素。最终结果将所有的 div 元素存储在了 divList 数组中。

七、Vue遍历 list

在 Vue 中，我们也可以使用 v-for 指令来遍历列表元素。如下所示，我们可以使用 v-for 指令遍历一个 list 对象，并展示其所有属性：

<template>
  <div v-for="(value, key) in list" :key="key">
    <span>{{ key }}:</span>
    <span>{{ value }}</span>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        list: {
          name: 'Ben',
          age: 25,
          gender: 'male'
        }
      }
    }
  }
</script>

上述代码中，我们使用 v-for 指令遍历了一个 list 对象，并将每个值和它的键分别绑定到变量 value 和 key 上。然后在模板中展示了每个键值对。

八、Vue遍历树

在 Vue 中，我们可以使用递归组件来遍历树形结构。递归组件是指在组件定义中使用了自身的组件。如下所示，我们可以使用递归组件遍历树形结构：

<template>
  <ul>
    <tree-node v-for="item in treeData" :node="item" :key="item.id"></tree-node>
  </ul>
</template>
<script>
  import treeNode from 'components/TreeNode.vue'
  export default {
    components: {
      treeNode
    },
    data () {
      return {
        treeData: [
          {
            id: 1,
            text: 'Root',
            children: [
              {
                id: 2,
                text: 'Child1'
              },
              {
                id: 3,
                text: 'Child2',
                children: [
                  {
                    id: 4,
                    text: 'Subchild'
                  }
                ]
              }
            ]
          }
        ]
      }
    }
  }
</script>

在上述代码中，我们定义了一个 TreeNode 组件，并在模板中使用 v-for 指令遍历 treeData 数组。对于每个节点，我们将其传递给 TreeNode 组件，然后在组件中递归调用自身，继续遍历子节点。通过这种方式，我们可以轻松地遍历树形结构，并展示出所有节点。

九、Vue遍历对象的方法

在 Vue 中，我们经常需要遍历对象的属性。一种最简单的方法是使用 for-in 语句来遍历对象的属性。如下所示，我们可以使用 for-in 语句遍历一个 person 对象并将其所有属性展示出来：

<template>
  <div>
    <div v-for="(value, key) in person" :key="key">
      <span>{{ key }}:</span>
      <span>{{ value }}</span>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        person: {
          name: 'Ben',
          age: 25,
          gender: 'male'
        }
      }
    }
  }
</script>

在上述代码中，我们使用 v-for 指令遍历了 person 对象，并将其每个属性和值分别绑定到 key 和 value 变量上。然后在模板中展示了每个属性和值。

总结

Vue 的遍历功能是其非常重要的特性之一，我们可以使用 v-for 指令和 for-in 语句 来遍历各种类型的数据结构。通过这些功能，我们可以轻松地渲染数组、列表、树形结构、对象等多种数据类型，从而实现丰富的页面展示效果。

推荐文章