JSFiddle - React, Tailwind, and code Playground

by zhouyulong

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>

CSS

.allstar50 {
  color: red;
}

.allstar45 {
  color: blue;
}

.allstar40 {
  color: purple;
}

.allstar35 {
  color: green;
}

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"
        }
    }
]
}

})