Vuejs 数组渲染

【问题标题】：Vuejs array renderingVuejs 数组渲染
【发布时间】：2019-09-28 23:07:34
【问题描述】：

我在我的项目中使用 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 中动态地做到这一点？

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案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 中的第二个值是当前元素的索引。我们在这里专门使用它来绑定到key 属性，这有助于防止呈现问题。

希望这会有所帮助！

【讨论】：