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

Question

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>
  `
});