猩猩老师 2021-12-30 09:08 采纳率: 88.9%
浏览 450
已结题

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>


  • 写回答

4条回答 默认 最新

  • 禅思院 前端领域优质创作者 2021-12-30 10:09
    关注
    
    <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年度博客之星,希望得到您的五星,感谢大家的支持,谢谢!

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 4月26日
  • 已采纳回答 4月18日
  • 创建了问题 12月30日

悬赏问题

  • ¥18 深度学习tensorflow1,ssdv1,coco数据集训练一个模型
  • ¥100 关于注册表摄像头和麦克风的问题
  • ¥30 代码本地运行正常,但是TOMCAT部署时闪退
  • ¥15 关于#python#的问题
  • ¥15 主机可以ping通路由器但是连不上网怎么办
  • ¥15 数据库一张以时间排好序的表中,找出多次相邻的那些行
  • ¥50 关于DynamoRIO处理多线程程序时候的问题
  • ¥15 kubeadm部署k8s出错
  • ¥15 Abaqus打不开cae文件怎么办?
  • ¥15 小程序准备上线,软件开发公司需要提供哪些资料给甲方