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

Vue.js javascript html5
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">

Previous: Ask the front-end bosses about the problems encountered in using indexedDB?

Next: Element time selection how to change the default time on the calendar

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
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-1bf72fb-32044.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-1bf72fb-32044.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?