vue-for如何在tr中一行遍历三个td

有一个需求，需要打印多行三列的数据

<table width="100%">
        <tr v-for="ho in hotel">
              <td align="center" v-if="ho.houseState===0" style="background-color: darkgray">{{ho.houseId}}({{ho.houseType}})</td>
              <td align="center" v-else-if="ho.houseState===1" style="background-color: yellow">{{ho.houseId}}({{ho.houseType}})</td>
              <td align="center" v-else-if="ho.houseState===2" style="background-color: pink">{{ho.houseId}}({{ho.houseType}})</td>
              <td align="center" v-else-if="ho.houseState===3" style="background-color: bisque">{{ho.houseId}}({{ho.houseType}})</td>
         </tr>

<template>
  <div>
    <table width="100%">
        <tr v-for="ho in hotel">
              <td align="center"  :style="{'background-color:`${colors[ho.houseState]}`'}">{{ho.houseId}}({{ho.houseType}})</td>
         </tr>
    </table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      colors: ['darkgray','yellow','pink',bisque'']
    };
  },
};
</script>

https://bbs.csdn.net/topics/603956066
我正在参加2021年度博客之星，希望得到您的五星，感谢大家的支持，谢谢！

你这边的代码，我看到是根据状态显示的，还要显示对应的颜色，不建议用v-for

还是用v-for去循环，你具体需求是什么，在哪添加，添加的数据是什么

<template>
  <div>
    <table width="100%">
        <tr>
              <td  v-for="(ho,index) in hotel" :key="index" align="center"  :style="{'background-color':`${colors[ho.houseState]}`}">{{ho.houseId}}({{ho.houseType}})</td>
         </tr>
    </table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      colors: ['darkgray','yellow','pink',bisque'']
    };
  },
};
</script>

如有帮助，麻烦点个【采纳此答案】 谢谢啦~