javascript - Vuejs数组渲染

Question

我在我的项目中使用 Vuejs，我想显示一个数组。 这是数据:

data() {
  return {
  people: [
      {"name": "Emily","properties": ["nice","good"]},
      {"name": "John","properties": ["bad","not good"]}
    ]
  }
}

所以我希望这些数据应该这样显示:

<ul>
  <li>Emily : <p>- nice</p><p>- good</p></li>
  <li>John : <p>- bad</p><p>- not good</p></li>
</ul>

我的问题是如何在 Vuejs 中动态地执行此操作？

Answer 1

使用 v-for :

<ul>
  <li v-for="(person, i) in people" :key="i">{{ person.name }} : 
      <p v-for="(property, j) in person.properties" :key="j">- {{ property }}</p>
  </li>
</ul>

每个 v-for、i 和 j 中的第二个值是当前元素的索引。我们在这里专门使用它来绑定(bind)到 key 属性，这有助于防止渲染问题。

希望这有帮助!