Vue.js V-for 键值

在Vue.js中，v-for指令可以被用来循环渲染DOM元素。我们可以利用这个指令来渲染数组或对象中的数据，生成动态的列表或表格等内容。

渲染数组

使用v-for指令来渲染数组的方式如下：

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

上述代码中，我们定义了一个名为items的数组，然后使用v-for指令把它循环渲染到ul元素中的li子元素中。

在v-for指令中，我们使用括号包裹内部的item和index变量，来分别获取数组中每个元素的值和对应的索引。

我们还使用了:key绑定来指定每个渲染的元素的唯一标识，以便Vue.js能够更好地优化DOM操作。

渲染对象

使用v-for指令来渲染对象的方式如下：

<ul>
  <li v-for="(value, key) in user" :key="key">{{ key }}: {{ value }}</li>
</ul>

上述代码中，我们定义了一个名为user的对象，然后使用v-for指令渲染到ul元素中的li子元素中。

在v-for指令中，我们使用括号包裹内部的value和key变量，来分别获取对象中每个属性的值和对应的键名。

同样地，我们还是用:key绑定来指定每个渲染的元素的唯一标识。

v-for和v-if同时使用

当我们想要在v-for循环中使用v-if指令时，并不需要额外做出什么改动：

<ul>
  <li v-for="(item, index) in items" v-if="item.visible" :key="index">{{ item.text }}</li>
</ul>

在上面的例子中，我们使用了v-if指令来筛选出那些visible属性为true的元素。

v-for的带有对象参数的用法

v-for指令提供了许多有用的参数，可以帮助我们改变渲染的元素个数，修改默认的键值，以及遍历多维嵌套的数组等等。

以下是常用的v-for指令参数：

第一个参数：值

表示当前遍历到的元素。

<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>

第二个参数：键名

表示当前元素的键，在遍历对象时会返回对应的键名。

<ul>
  <li v-for="(value, key) in user">{{ key }}: {{ value }}</li>
</ul>

第三个参数：索引

当前遍历到的元素的下标或者键名。

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

第四个参数：自定义键名

使用v-for指令的:key绑定时，可以使用自定义键名来指定唯一标识符。

<ul>
  <li v-for="(item, index) in items" :key="`item-${index}`">{{ item }}</li>
</ul>

第五个参数：自定义值

带有括号的v-for指令允许我们使用一个自定义的变量来存储当前遍历到的元素。

<ul>
  <li v-for="({ name, age }, index) in users" :key="index">{{ name }} - {{ age }}</li>
</ul>

当我们需要遍历多维嵌套的数组时，可以使用括号和数组索引一起操作：

<ul>
  <li v-for="subList in lists">
    <ol>
      <li v-for="(item, index) in subList" :key="`item-${index}`">{{ item }}</li>
    </ol>
  </li>
</ul>

在上述代码中，我们使用了嵌套的v-for指令来遍历二维数组中的每个元素。我们遍历了外层的数组lists，然后在每个子元素上再使用了一个v-for指令来遍历它们内部的子数组。