在vue中怎么才能根据后台返回不同的文字渲染不同的图片呢?根据不同的文字状态,页面上给出不同的图片我是这样写的<li class="clearfix" v-for="(item,key) in myData"> <router-link :to="{path:'/home_details?id='+item.id+'&logDate='+item.status}"> <div>{{item.name}}</div> <div class="list_right"> <img :src="statusimage"/> <span v-bind:style="{'color':color(item)}">{{item.status}}</span> </div> </router-link></li>color(col){// if(col.status=="已完成") return "#FFD700"// if(col.status=="执行中") return "green"// if(col.status=="待执行") return "gray"// return "black" if(col.status=="已完成"){ return this.statusimage="../assets/img6.png" } if(col.status=="执行中"){ return this.statusimage="../assets/image7.png" } if(col.status=="待执行"){ return this.statusimage="../assets/image5.png" } },不同的文字颜色不同是可以实现的,为什么不同的图片不行呢? 页面报错这是为什么呢 怎么写呢?根据不同的文字渲染不同的图片
5 回答
有只小跳蛙
TA贡献1824条经验 获得超8个赞
有个死循环。
你的
return this.statusimage="../assets/image5.png";
可以只写
this.statusimage="../assets/image5.png"
或者只写
return "../assets/image5.png"
建议颜色和图片分开写,
你里面的
return this.statusimage
中间 this 绑定的对象不明确,有可能就是这里进入了循环。
剩下如果还不行,就要看到底哪里进入死循环了,要看代码逻辑,你这里给出的不够。
斯蒂芬大帝
TA贡献1827条经验 获得超8个赞
这个最后怎么解决的?遇到同样的问题,求答案。
我是直接用方法的,但是浏览器报找不到图片
<img v-bind:src="srcValue(item.ExecStatus)"/>
srcValue: function (status) {
if(status==2)
return '/Image/OK.png'
if(status==3)
return '/Image/Error.png'
if(status==1)
return '/Image/waiting.png'
else
return '/Image/waiting.png'
},
添加回答
举报
0/150
提交
取消