vue 根据不同状态改变内容并添加相应的颜色

最新推荐文章于 2025-06-10 18:11:36 发布

原创

最新推荐文章于 2025-06-10 18:11:36 发布 · 3.7k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍如何在Vue.js应用中根据不同的状态值改变显示的内容，并为其添加相应颜色。通过遍历数据获取状态，结合JavaScript实现动态更新，并利用Vue的监听钩子函数确保实时响应。

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

<span class="font_col" @click.stop >
    <i class="state_img"><img src="@/public/image/Ts_state.png" alt="" :style="fontstyle(item.state)"></i>
 <i class="icon1 icon2" :style="fontstyle(item.state)">{
  
  {item.state}}</i>
 </span>

先遍历数据获取状态值，并赋值相应的文字

if(this.Tsheetlist[i].state == 0){
   this.Tsheetlist[i].state = '1111'    
}if(stateT == 1){
    this.Tsheetlist[i].state = '2222'
 }if(stateT == 3){
  this.Tsheetlist[i].state = '333'
 }if(stateT == 4){
 this.Tsheetlist[i].state = '44'
 }

添加监听钩子函数

 computed: {
        fontstyle() {              
            return (icontent) => {
                if (icontent === "111"){
                    return { 'color': '#F1BE0D', 'transform':'translateX(0rem)'}
                } 
                else if (icontent === "222"){
                    return {'color':'#48AAF0','transform':'translateX(-0.37rem)'}