Vue

by von

HTML

<div id="app" class="container-fluid">
  <div class="row" v-if="!scores">
    <div class="col-12 text-center alert alert-success">
      Data Loading Please wait
    </div>
  </div>
  <div class="row p-5" v-else>
    <div class="card col-12 col-lg-4 col-md-6" v-for="(value, key) in scores">
      <div class="card-body">
        <div class="card-title display-4 text-bold">
          {{ key }}
        </div>
        <div class="card-subtitle">
          <span class="text-success text-bold"  v-if="willBeChecked(value)">CHECKED</span>
          <span class="text-danger text-bold" v-else>NOT CHECKED</span>
        </div>
        <div class="card-text" v-if="willShowDiv(comp)">
          {{ key }} lore
        </div>
      </div>
    </div>
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true }
    ]
  },
  methods: {
  	
  }
})