JSFiddle - React, Tailwind, and code Playground

by Jussia

HTML

<div id="demo">
  <p v-bind:class="{'on': on, 'off': off}">Hover over color!</p>
  <p v-on:mouseout="mouseOut" v-on:mouseover="mouseOver"> green </p>
  <p v-on:mouseout="mouseOut" v-on:mouseover="mouseOver"> red </p>
</div>

CSS

.on {color: green;}

.off {color: red;}

JavaScript

var demo = new Vue({
  el: '#demo',
  data: {
    on: false,
    off: false
  },
  methods: {
    mouseOver: function() {
      this.on = true;
      this.off = true;
    },
    mouseOut() {
    this.on = false;
    this.off = false;
    }
  }
});