Question

我有一张桌子，我向人们展示了一些属性。由于这些属性可以在将来扩展，我需要显示表头中的所有可用属性，以及表体下这些属性的相关答案

我可以使用以下语法访问人员的属性： v-for =＆＃39;人物中的人物＆＃39;和{{people.name}} 但我需要动态地写下“姓名”。到桌头。

是否有任何选项可以访问对象属性，如姓名，年龄，工资，国家/地区等？例如：人= {名称：约翰，姓氏：黑人，年龄：35，国家：德国人} < / p>

<table class="table table-filter">
                        <thead>
                          <tr>
                            <th>Key</th>
                            <th>Name</th>
                            <th>Age</th>
                            <th>Whatever</th>

                          </tr>
                        </thead>
                            <tbody>
                            <tr>
                                <td>Value</td>
                                <td>John</td>
                                <td>35</td>
                                <td>Green</td>
                            </tr>
                            <tr>
                                <td>Value</td>
                                <td>Selin</td>
                                <td>23</td>
                                <td>Black</td>
                            </tr>                       
       </tbody>

Answer 1

与v-for指令一样，您不仅可以循环数组，还可以循环对象，只需使用第二个嵌套的v-for指令。通用示例：

<thead>
  <tr>
    <th v-for="val, key in person[0]"> // with first object in array
      {{ key }} // show key - name for each column
    </th>
  </tr>
</thead>
<tbody>
  <tr v-for="person, idx in people" :key="idx"> // with whole array
    <td v-for="val, key in person"> // with each object in array
      {{ val }} // show value for each column
    </td>
  </tr>
</tbody>

Answer 2

Accordibg您的样本数据people={name:john, surname: black, age:35, country:german}

水平表中的键值

 <table>
  <tr>
       <th v-for="(value, index) in people">
          {{ index }}
       </th>
  </tr>
  <tr>
       <td v-for="(value, index) in people">
          {{ value }}
       </td>
  </tr>
 <table>

垂直表中的键值

 <table>
  <tr  v-for="(value, index) in people">
       <th>
          {{ index }}
       </th>
       <td>
          {{ value }}
       </td>
  </tr>
 <table>

如何到达vue对象属性以在头上显示它们

2 个答案: