JSFiddle - React, Tailwind, and code Playground

by holoverse

HTML

<div id="app">
  <div  class="jokes" v-for="joke in jokes" >
  <strong>{{joke.body}}</strong>
  <small>{{joke.upvotes}}</small>
  <p :class="{ blue : joke.upvotes>0 }">EERER</p>
  <button v-on:click="upvote(joke)">Vote</button>
  <div>
</div>

CSS

.blue {
  background:blue;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    jokes:[{body:"test", upvotes:0, upvoted:false},{body:"test2",upvotes:0, upvoted:false}]
  },
  methods: {
    upvote: function(joke) {
      joke.upvotes ++;
   }
  }
});