如何添加Vue类绑定的数字？

Question

我试着把它设为vue类绑定，但是我不太确定如何绑定？ 我想添加类值编号，例如class = "allstar50"，然后将类Bindingsuse添加到v-for指令以呈现不同颜色文本项的列表？ jsfiddle here

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"