如何增加Vue类绑定的数量？

Question

我尝试将其放在vue类绑定中，但我不确定如何绑定？我想添加到类的值编号上，例如class = "allstar50" ，然后将类Bindingsuse添加到v-for指令以呈现不同颜色的文本项列表？ jsfiddle在这里

javascript文件：

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>

我要的效果如下：

Answer 1

在Vue中，绑定假定您使用的是JS，因此纯文本allstar除非是变量，否则将不起作用。 此外，插值语法（ {{ }} ）在绑定内部不起作用。

请尝试以下操作：

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