Vue v-for 教程 简单的介绍和使用

v-for 指令是 在 Vue 中进行列表渲染 。 如果你的 Vue 实例有一个数组 data，您可以使用 v-for：

const app = new Vue({
  data: () => ({ people: [Axl Rose, Slash, Izzy Stradlin] }),
  // 1 `<li>` for each person in `people`
  template: `
    <div>
      <h1>Band Members</h1>
      <ul>
        <li v-for=person in people>
          {{person}}
        </li>
      </ul>
    </div>
  `
});

Vue 还处理 数组变化检测 。如果您要 使用从数组中删除一个元素 splice()，Vue 会移除一个 <li> 来自 DOM 为您服务。

// Remove Izzy Stradlin from the array, and also from the `<ul>`
this.array.splice(2, 1);

和 v-model 一起使用

虽然您可以使用循环遍历字符串数组 v-for，它不适用于 v-model，v-model 指令将无法通过对 <input>。

  const app = new Vue({
    data: () => ({ people: [Axl Rose, Slash, Izzy Stradlin] }),
    // 1 `<input>` for each person in `people`
    template: `
      <div>
        <h1>Band Members</h1>
        <div>{{people}}</div>
        <ul>
          <li v-for=person in people>
            <input v-model=person>
            <span>{{person}}</span>
          </li>
        </ul>
      </div>
    `
  });

即使 `input` 更新了，数组也不会改变！

解决这个问题的方法是使用一个对象数组 v-for。每当你使用 v-model 和 v-for，确保你绑定的属性 v-model 是一个对象属性。

  const app = new Vue({
    data: () => ({
      people: [
        { name: Axl Rose },
        { name: Slash },
        { name: Izzy Stradlin }
      ]
    }),
    template: `
      <div>
        <h1>Band Members</h1>
        <div>{{people}}</div>
        <ul>
          <li v-for=person in people>
            <input v-model=person.name>
            <span>{{person.name}}</span>
          </li>
        </ul>
      </div>
    `
  });

与对象一起使用

你也可以使用 v-for 使用 v-for=(value, key) in obj 句法。注意 v-for 只循环 自己的属性 。

const app = new Vue({
  data: () => ({
    people: {
      singer: Axl Rose,
      guitarist: Slash,
      bassist: Duff McKagan
    }
  }),
  // 3 `<li>` elements: Axl Rose - singer, Slash - guitarist,
  // and Duff McKagan - bassist
  template: `
    <div>
      <h1>Band Members</h1>
      <ul>
        <li v-for=(value, key) in people>
          {{value}} - {{key}}
        </li>
      </ul>
    </div>
  `
});