How to add to the number for Vue Class Bindings?

Question

I try to put it vue class bindings, but I'm not quite sure how to bindings？ I want to add to the class value number, for example class = "allstar50" , then class Bindingsuse to the v-for directive to render a list of different color text items? jsfiddle here

javascript file:

var vm = new Vue({
  el: '#app',
  data: {
    colors: [
    {
        title: 'A',
        rating:{
            stars:"45"
        }
    },
    {
        title: 'B',
        rating:{
            stars:"50"
        }
    },
    {
        title: 'C',
        rating:{
            stars:"40"
        }
    },
    {
        title: 'D',
        rating:{
            stars:"35"
        }
    }
]
}

})

css:

.allstar50 {
  color: red;
}

.allstar45 {
  color: blue;
}

.allstar40 {
  color: purple;
}

.allstar35 {
  color: green;
}

html:

<div id="app">
  <div class="content">
    <ul>
      <li v-for="item in colors">
        <p :class="allstar{{item.rating.stars}}">{{item.title}}</p>
      </li>
    </ul>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

I want to the effect is as follows:

Answer 1

In Vue, bindings assume that you're using JS, so the plain text allstar won't work unless it's a variable. Additionally, interpolation syntax ( {{ }} ) won't work inside bindings.

Try the following instead:

:class="'allstar' + item.rating.stars"