如何增加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"