Trying to utilize Vue class bindings, but uncertain about the syntax for bindings. I aim to append a numeric value to the class attribute, for instance class = "allstar50", then employ class bindings with the v-for directive to display a list of text items in different colors.
A link to the jsfiddle example can be found 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>