如何在我的列中显示这些数据？答案

【问题标题】：How do I display this data in my columns?如何在我的列中显示这些数据？
【发布时间】：2020-06-01 11:33:34
【问题描述】：

我对 VueJS 有疑问。我有一组很多数据。我希望它按顺序出现在我的列中。如何正确插入代码？感谢您的帮助。

[
  {
    "sort": 0,
    "title": "My title",
    "description": "My description"
  },
  {
    "sort": 1,
    "title": "My Title1",
    "description": "My description"
  },
  {
    "sort": 2,
    "title": "My title2",
    "description": "My description"
  },
]

我希望它按顺序进入这里

<div class="row pt-md-5 mt-md-5 mb-5 p-4">
  <div class="col-xl-6 mx-auto">
    <div class="card p-3">
      <h3>Want the title here</h3>
      <p>Description here </p>
    </div>
  </div>
  <div class="col-xl-6 mx-auto">
    <div class="card p-3">
      <h3>Want the title here</h3>
      <p>Description here </p>
    </div>
  </div>
</div>
</div>

【问题讨论】：

当我按照指南进行操作时，我的网站出现错误。 var app = new Vue({ el: '#app', data: { title: 'Hi', description: ' Here' } }) > 25 | var app = new Vue({ | ^ 26 | el: '#app', 27 | data: { 28 | title: 'Hi',

标签： html vue.js vuejs2

【解决方案1】：

使用 Vue，您可以使用 v-for 指令来迭代您的对象并以您想要的方式显示它们：

  <div 
    v-for="(object, index) in array" 
    :key="index" 
    class="col-xl-6 mx-auto"
  >
    <div class="card p-3">
      <h3>{{ object.title }}</h3>
      <p>{{ object.description }}</p>
    </div>
  </div>

在 v-for 中，object 可以随意命名，array 必须是数组的名称，index 只是其中每个对象的索引数组，然后，在v-for 中，您可以使用模板访问每个对象的属性，即{{ object.title }}。

【讨论】：