JSFiddle - React, Tailwind, and code Playground

by philll_t

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://rawgit.com/vuejs-tips/v-money/master/dist/v-money.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spectre.css/0.2.14/spectre.min.css">
<div id="app" class="empty">
  <h1>
    Directive
  </h1>
  <input v-model="price"
         v-money="money"
         class="form-input input-lg"
         style="text-align: right" />
  {{price}}
</div>

JavaScript

new Vue({
  el: '#app',
  data () {
    return {
      price: 123.45,
      money: {
        decimal: '.',
        thousands: ',',
        prefix: '$',
        precision: 2,
        masked: false /* doesn't work with directive */
      }
    }
  }
})