Vue dynamically achieves scoring results and vue dynamic scoring

Vue dynamically achieves scoring results and vue dynamic scoring

The examples in this article share with you the specific code for Vue to dynamically achieve the scoring effect for your reference. The specific content is as follows:

1. There are three types of images:

On: half: off

<style>  .star{    font-size: 0;  }  .star-item{    display: inline-block;    background-repeat: no-repeat;    width: 20px;    height: 20px;    margin-right: 22px;    background-size: 100%;  }  .star-item.on{    background-image: url(img/on.png);  }  .star-item.half{    background-image: url(img/half.png);  }  .star-item.off{    background-image: url(img/off.png);  }</style>

<Div id = "app"> <ul class = "star"> <span v-for = "(itemClass, index) in itemClasses ": class = "itemClass" class = "star-item" track-by = "index"> </span> <! -- Performance Optimization track-by data will not be re-rendered without changing --> </ul> </div>

<Script> new Vue ({el: '# app', data: {score: 4}, computed: {// calculation attribute itemClasses () {let result = []; let score = Math. floor (this. score * 2)/2; let hasDecimal = score % 1! = 0; let integer = Math. floor (score); for (let I = 0; I <integer; I ++) {result. push ("on");} if (hasDecimal) {result. push ("half");} while (result. length <5) {result. push ("off") ;}return result ;}}) </script>

Change code as needed

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.