Vue 获取数组键名的方法

Vue 获取数组键名的方法主要有两种，分别是使用v-for循环数组时获取索引值与使用Object.keys()方法获取数组键名。

使用v-for获取数组索引值

在使用v-for循环渲染数组时可以通过指定两个参数来获取数组中每个元素的值和对应的索引值，通过获取索引值就可以获取数组的键名。示例代码如下：

<ul>
  <li v-for="(item,index) in arr">{{ index }}-{{ item }}</li>
</ul>

在上述代码中，arr是一个数组，通过v-for循环，使用(item,index)指定了数组中每个元素的值(item)和对应的索引值(index)。在模板中使用{{ index }}即可获取数组的键名。

使用Object.keys()获取数组键名

另一种获取数组键名的方法是使用JavaScript的Object.keys()方法，它可以返回给定对象的自身可枚举属性的键名组成的数组。示例代码如下：

<div v-for="key in Object.keys(obj)" :key="key">
  {{ key }}: {{ obj[key] }}
</div>

在上述代码中，obj是一个JavaScript对象，使用Object.keys()方法获取了它的键名数组，然后通过v-for渲染每个键名对应的值。在模板中使用{{ key }}即可获取数组的键名。

注意：使用Object.keys()方法只能获取到数组的键名，而无法获取到数组的索引值。

以上便是Vue获取数组键名的两种常用方法，根据实际需求选择适合的方式。