vuejs 根据后台返回数组，渲染图片路径

Question

后台返回的数组为：
["5", "1", "3", "2", "1",]

页面要实现对应数量的黄色星星
（例如：5的话，五颗黄色的星星，默认是五颗灰色的星星，此处图片就是一个示意，希望大家不要误解）：

默认item里的数据：

            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"},

目前页面代码是这样的：

<li class="buy_will">
    购买意愿
    <span class="buy_stars" >
        <img class="stars" v-for="star in item.stars" :src="star.starsUrl" alt="1">
    </span>
</li>

那么问题来了，该如何根据数组里面的数字来替换称黄色的星星呢？
li是v-for="item in items"遍历出来的，stars是items对象里的一个数组对象

Answer 1

按照你的写法需要更换stars数组的值,但是你不是就一个评分,所以一个数组肯定是不行的,所以这个思路并不好

换个思路,就两种图片,黄色的总在前面,灰色的总在后面,那可以这么实现

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>

Answer 2

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

你试试这样，你的问题描述的有点不清晰，不知道你是多层循环还是单层循环，但是按照数量去循环黄色的和灰色的星星应该是可以的，他俩加一块等于5

Answer 3

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，只需要将其渲染到页面就好了， 你用的是vue，就这样：

    <img class="stars" v-for="star in stars" :src="star" alt="1">