v-for遍历对象时in&of

在 Vue 中，v-for 用于遍历数组或对象的数据，可以使用两种语法：item in items 和 item of items。这两种语法的区别主要体现在对对象的遍历上。

1. item in items

这是较早引入的语法，主要用于遍历对象的键。例如：

HTML

<ul>
  <li v-for="key in object">{{ key }}: {{ object[key] }}</li>
</ul>

在这个例子中，key 会依次被赋值为对象的每个键，然后通过 object[key] 来访问对应的值。

2. item of items

这是 ES6 引入的新语法，更灵活，不仅可以遍历对象的键，还可以遍历数组的元素。例如：

HTML

<ul>
  <li v-for="value of array">{{ value }}</li>
</ul>

在这个例子中，value 会依次被赋值为数组的每个元素。

总结

总的来说，在遍历对象时，in 语法用于遍历键，而 of 语法用于遍历值。在遍历数组时，两者是等效的，你可以根据个人偏好选择使用其中之一。在实际开发中，of 语法更常用，因为它的语法更加清晰，适用于遍历数组和对象的情况。

Donate