vue.js指令-v-for

v-for指令是Vue.js中用于循环渲染列表的指令。它可以遍历数组、对象和字符串，并根据指定模板进行重复渲染。

基本语法：

<ul>
  <li v-for="item in list" :key="item.id">
    {{ item.name }}
  </li>
</ul>

这里的list是一个数组，item表示数组中的每个元素。:key是必须的，用于给每个循环项添加唯一标识。

使用v-for指令时，可以提供额外的参数来获取索引和父级索引：

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

这里的index表示当前循环项的索引。

v-for指令还可以用于对象的循环渲染：

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

这里的key表示对象的每个属性名，value表示属性值。

除了数组和对象，v-for指令还可以用于字符串的循环渲染。字符串会被分割成单个字符进行循环：

<div v-for="char in 'Hello'">
  {{ char }}
</div>

还可以使用带有v-for的template元素来循环渲染多个元素，而不需要包装在额外的div中：

<template v-for="item in list">
  <h2>{{ item.title }}</h2>
  <p>{{ item.content }}</p>
</template>

v-for指令还支持使用值为整数的特殊语法，可以快速生成指定长度的循环项：

<div v-for="n in 10">
  {{ n }}
</div>

这将生成10个div，内容分别为1到10。

在循环中使用对象的方法：

<template v-for="item in list">
  <div v-if="item.isShown">
    {{ item.method() }}
  </div>
</template>

在这个例子中，item.method()是一个对象方法，它可以在循环中调用。

总结： v-for指令是Vue.js中用于循环渲染列表的指令，可以遍历数组、对象和字符串，并根据指定模板进行重复渲染。它可以与索引、父级索引以及对象方法一起使用。