Vuejs returns the array according to the background and renders the image path.

the array returned by the background is
["5", "1", "3", "2", "1",]

page to achieve the corresponding number of yellow stars
(for example: 5, five yellow stars, the default is five gray stars, here is a picture, I hope you don"t misunderstand):

clipboard.png

data in default 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"},
            ],

path of yellow stars:

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

the current page code is as follows:

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

so the question is, how do you replace the yellow stars according to the numbers in the array?
li is traversed by vFF = "item in items", and stars is an array of objects in the items object

Jun.16,2021

according to the way you write it, you need to change the value of the stars array, but you don't have just one score, so one array is definitely not good, so this idea is not good

.

to change the way of thinking, there are two kinds of pictures, the yellow one is always in the front and the gray one is always behind. That can be realized in this way

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>

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

if you try this, the description of your problem is a little unclear. I don't know if you are a multi-layer loop or a single-layer loop, but it should be possible to cycle the yellow and gray stars according to the number. They add up to 5

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

when you get the stars, you just need to render it to the page. You use vue, and that's it:


    <img class="stars" v-for="star in stars" :src="star" alt="1">
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b30ef4-2bd4f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b30ef4-2bd4f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?