JSFiddle - React, Tailwind, and code Playground

by 静 轩

HTML

<script src="https://cdn.jsdelivr.net/vue/1.0.24/vue.js"></script>
<div id="app">
  <div v-for="value in 10" class="{{ isLessThanRandom($index) ? 'colorRed' : 'colorGreen'}}" @click='onTestClick(value)'>{{$index}}</div>
  <hr>
  <div v-for="value in 10" class="{{ this.isLessThanRandom($index) ? 'colorRed' : 'colorGreen'}}" @click='onTestClick(value)'>{{$index}}</div>
</div>

CSS

.colorRed,
.colorGreen {
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 1px solid #333;
  text-align: center;
  line-height: 30px;
}

.colorRed {
  background-color: #f00;
}

.colorGreen {
  background-color: #0f0;
  pointer-events: none;
}

JavaScript

new Vue({
  el: "#app",
  data: {},
  methods: {
    isLessThanRandom: function(index) {
      var randomNum = this.getRandomNum(1, 10)
      if (index <= randomNum) {
        return true
      } else {
        return false
      }
    },
    getRandomNum: function(Min, Max) {
      var Range = Max - Min;
      var Rand = Math.random();
      return (Min + Math.round(Rand * Range));
    },
    onTestClick: function(index) {
      alert(index)
    }
  }
})