鍍金池/ 問(wèn)答/HTML5  HTML/ vuejs 根據(jù)后臺(tái)返回?cái)?shù)組，渲染圖片路徑

vuejs 根據(jù)后臺(tái)返回?cái)?shù)組，渲染圖片路徑

后臺(tái)返回的數(shù)組為：
["5", "1", "3", "2", "1",]

頁(yè)面要實(shí)現(xiàn)對(duì)應(yīng)數(shù)量的黃色星星
（例如：5的話，五顆黃色的星星，默認(rèn)是五顆灰色的星星，此處圖片就是一個(gè)示意，希望大家不要誤解）：

clipboard.png

默認(rèn)item里的數(shù)據(jù)：

            stars:[
                {starsUrl:"./img/net_more/star_off.png"},
                {starsUrl:"./img/net_more/star_off.png"},
                {starsUrl:"./img/net_more/star_off.png"},
                {starsUrl:"./img/net_more/star_off.png"},
                {starsUrl:"./img/net_more/star_off.png"},
            ],

黃色星星的路徑：

{starsUrl:"./img/net_more/star_on.png"},

目前頁(yè)面代碼是這樣的：

<li class="buy_will">
    購(gòu)買意愿
    <span class="buy_stars" >
        <img class="stars" v-for="star in item.stars" :src="star.starsUrl" alt="1">
    </span>
</li>

那么問(wèn)題來(lái)了，該如何根據(jù)數(shù)組里面的數(shù)字來(lái)替換稱黃色的星星呢？
li是v-for="item in items"遍歷出來(lái)的，stars是items對(duì)象里的一個(gè)數(shù)組對(duì)象

回答
編輯回答
厭遇

按照你的寫(xiě)法需要更換stars數(shù)組的值,但是你不是就一個(gè)評(píng)分,所以一個(gè)數(shù)組肯定是不行的,所以這個(gè)思路并不好

換個(gè)思路,就兩種圖片,黃色的總在前面,灰色的總在后面,那可以這么實(shí)現(xiàn)

data = ["5", "1", "3", "2", "1"]
imgs = {
    off: './img/net_more/star_off.png',
    on: './img/net_more/star_on.png'
}
<li v-for="(item,index) of data">
    <img class="stars" v-for="star in 5" :src="star <= item ? imgs.off : imgs.on" alt="1">
</li>
2017年12月4日 08:03
編輯回答
還吻
<span class="buy_stars" >
    <img class="stars" v-for="star in item.stars" :src="star.starsOn" alt="1">
    <img class="stars" v-for="star in (5-item.stars)" :src="star.starsOff" alt="1">
</span>

你試試這樣，你的問(wèn)題描述的有點(diǎn)不清晰，不知道你是多層循環(huán)還是單層循環(huán)，但是按照數(shù)量去循環(huán)黃色的和灰色的星星應(yīng)該是可以的，他倆加一塊等于5

2018年8月3日 14:48
編輯回答
瘋子范
data = ["5", "1", "3", "2", "1"]
imgs = Array(5).fill('./img/net_more/star_on.png').concat(Array(5).fill(''./img/net_more/star_ff.png''))
function star(n) { return imgs.slice(5-n,10 -n)}

const stars = data.map(star)

拿到了stars，只需要將其渲染到頁(yè)面就好了， 你用的是vue，就這樣：


    <img class="stars" v-for="star in stars" :src="star" alt="1">
2018年6月16日 12:58