在vue中怎么才能根據(jù)后臺(tái)返回不同的文字渲染不同的圖片呢？

根據(jù)不同的文字狀態(tài)，頁面上給出不同的圖片

我是這樣寫的

<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=="執(zhí)行中") return "green"
//  if(col.status=="待執(zhí)行") return "gray"
//  return "black"
    if(col.status=="已完成"){
        return this.statusimage="../assets/img6.png"
    }
    if(col.status=="執(zhí)行中"){
        return this.statusimage="../assets/image7.png"
    }
    if(col.status=="待執(zhí)行"){
        return this.statusimage="../assets/image5.png"
    }    
},

不同的文字顏色不同是可以實(shí)現(xiàn)的，為什么不同的圖片不行呢？頁面報(bào)錯(cuò)

這是為什么呢怎么寫呢？

根據(jù)不同的文字渲染不同的圖片

回答

編輯回答

舊言

vue的數(shù)據(jù)綁定，this.statusimage重新賦值之后就會(huì)更改，不需要再用return了感覺是這個(gè)問題你再看看

2017年12月4日 23:54

編輯回答

憶當(dāng)年

你要記住assets文件夾在你代碼跑起來的時(shí)候是不存在的，所以不要在vue的邏輯的路徑里出現(xiàn)assets，有兩種方式：

這些圖片放在static里，路徑寫/static/xxx
使用import img1 from '../assets/xx'導(dǎo)入圖片，然后路徑里寫this.xxx = img1或者:src="img1"

除了文件路徑錯(cuò)誤還有其他錯(cuò)誤。

statusimage：多個(gè)v-for的dom公用了一個(gè)statusimage，會(huì)導(dǎo)致渲染結(jié)果相同。可以將this.statusimage = xxx改為col.statusimage = xxx，或者再起一個(gè)數(shù)組。
直接把color方法改個(gè)名叫g(shù)etImgPath，綁定到src后面:src="getImgPath(col)"，方法內(nèi)直接返回路徑地址，這么寫的話就不需要按1去改了，然后把style里的刪了。

2017年11月6日 23:32

編輯回答

孤酒

有個(gè)死循環(huán)。
你的

return this.statusimage="../assets/image5.png"；

可以只寫

this.statusimage="../assets/image5.png"

或者只寫

return "../assets/image5.png"

建議顏色和圖片分開寫，
你里面的

return this.statusimage

中間 this 綁定的對象不明確，有可能就是這里進(jìn)入了循環(huán)。
剩下如果還不行，就要看到底哪里進(jìn)入死循環(huán)了，要看代碼邏輯，你這里給出的不夠。

2017年12月28日 17:53

編輯回答

她愚我

有可能是圖片路徑的原因，所以建議可以用class直接改，把圖片寫成背景圖

2017年11月30日 03:32

編輯回答

落殤

這個(gè)最后怎么解決的？遇到同樣的問題，求答案。
我是直接用方法的，但是瀏覽器報(bào)找不到圖片
<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'
        },

2017年12月2日 08:03