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

最新推荐文章于 2024-03-20 13:27:50 发布

柚子、、

最新推荐文章于 2024-03-20 13:27:50 发布

阅读量3.6k

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/ZZHK666/article/details/122943833

版权

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

摘要由CSDN通过智能技术生成

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