v-for=“item in arr“ 的理解

在 Vue.js 中，v-for 是一个指令，用于在模板中渲染一个列表的数据。v-for="item in arr" 这个语法中，item 和 arr 分别代表以下含义：

1. item:

   • item 是当前迭代到的数组元素或对象的别名。在每次迭代中，item 会被赋予 arr 中的一个值，这样你就可以在模板中使用 item 来访问和显示当前迭代到的数据。
   • 例如，如果 arr 是一个包含字符串的数组，那么 item 在每次迭代中就会是一个字符串。如果 arr 是一个对象数组，那么 item 就会是数组中的一个对象。

2. arr:

   • arr 是你想要迭代的数组或可迭代对象。这通常是一个在 Vue 组件的 data、computed 属性或 methods 中定义的数组。
   • v-for 会遍历 arr 中的每一个元素，并为每个元素创建一个新的模板实例。

举个例子，假设你有以下的 Vue 组件：

<template>  
  <div>  
    <ul>  
      <li v-for="item in arr" :key="item.id">  
        {{ item.name }}  
      </li>  
    </ul>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      arr: [  
        { id: 1, name: 'Item 1' },  
        { id: 2, name: 'Item 2' },  
        { id: 3, name: 'Item 3' },  
      ],  
    };  
  },  
};  
</script>

在这个例子中，v-for="item in arr" 会遍历 arr 数组中的每个对象，每次迭代时，item 就会是数组中的一个对象，然后你可以通过 item.name 来访问和显示该对象的 name 属性。