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是当前元素的索引。我们在这里专门使用它绑定到key属性，这有助于防止呈现问题。

希望这会有所帮助！

Vue.js数组渲染

1 个答案: