Javascript vue表显示v-for v-if的数据

这是我的HTML代码

<table id="showdata">
  <tr>
    <th>Room1</th>
  <th>Room2</th>
    <th>Room3</th>
  </tr>
  <tr v-if="detail.room === 'Room1'" v-for="detail in roomDetail">
    <td>{{detail.time}}</td>
    <td>{{detail.name}}</td>
    <td>{{detail.status}}</td>
    <td>{{detail.room}}</td>
  </tr>
</table>

---

我想展示同一排的一个新房间。我该怎么办？

你需要一张桌子里的一张桌子

像这样的

<table id="showdata">
    <tr>
        <th>Room1</th>
        <th>Room2</th>
        <th>Room3</th>
    </tr>
    <tr>
        <td v-for="(x, key) in ['Room1', 'Room2', 'Room3']" :key="key" >
            <table>
                <tr v-for="(detail, key) in roomDetail.filter(({ room }) => room === x)" :key="key" >
                    <td>{{ detail.time }}</td>
                    <td>{{ detail.name }}</td>
                    <td>{{ detail.status }}</td>
                    <td>{{ detail.room }}</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

---

您已经展示了您的期望，但是您实际得到了什么？您首先需要一个表中的表（尽管您可以使用网格或flex在没有表的情况下完成，但这并不重要）

<table id="showdata">
    <tr>
        <th>Room1</th>
        <th>Room2</th>
        <th>Room3</th>
    </tr>
    <tr>
        <td v-for="(x, key) in ['Room1', 'Room2', 'Room3']" :key="key" >
            <table>
                <tr v-for="(detail, key) in roomDetail.filter(({ room }) => room === x)" :key="key" >
                    <td>{{ detail.time }}</td>
                    <td>{{ detail.name }}</td>
                    <td>{{ detail.status }}</td>
                    <td>{{ detail.room }}</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

td {
    vertical-align: top;
}