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

Question

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

<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>

Answer 1

<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年度博客之星，希望得到您的五星，感谢大家的支持，谢谢！