vue dom多状态判断

最新推荐文章于 2022-08-12 17:10:09 发布

他是一个疯子

最新推荐文章于 2022-08-12 17:10:09 发布

阅读量649

点赞数 2

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/m0_37166480/article/details/111605695

版权

本文介绍了如何通过修改接口返回数据并直接绑定到DOM元素，以更简洁的方式处理页面上多种状态的显示。利用Vue.js的数据绑定，创建了liveStatusname和classname对象，将状态码映射到对应的文本和样式类。在接收到API数据后，通过map函数动态更新列表项的状态和样式，提高了代码的可读性和效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面需要根据接口返回状态来显示不同的内容跟样式但是有多种状态
此时三目运算有些臃肿不如直接修改接口返回数据 dom层直接绑定修改后的接口数据：
<div :class="item.classname">{{item.liveStatusname}}</div>

在data里面定义状态所对应的数据：

liveStatusname :{
          1 : '即将开始',
          2 : '正在直播',
          3 : '查看回放',
          4 : '回放生成中'
        }
classname :{
          1 : 'live-right-btngrey',
          2 : 'live-right-btnred',
          3 : 'live-right-btngreen',
          4 : 'live-right-btngrey'
        }

    ApiGetlivelist(params).then(res=>{
      if(res.code == 200){
      
		循环接口返回数据 修改状态
        this.livelist = res.pc.details.map(item=>{
          if (item.liveStatus==3 && !item.playUrl) {
            item.liveStatus = 4
          }
          return {
              ...item,
              classname: this.classname[item.liveStatus],
              liveStatusname:this.liveStatusname[item.liveStatus]
            }
        })
      }
    })