text: <!DOCTYPE html>
  <html>
    <head>
      <title>Two-way Currency Filter</title>
      <script src="https://unpkg.com/vue@1.0/dist/vue.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/accounting.js/0.4.1/accounting.min.js"></script>
    </head>
    <body>
      <div id="app">
        <currency-input label="Price" v-bind:value.sync="price"></currency-input>
        <currency-input
          label="Shipping"
          v-bind:value.sync="shipping"
        ></currency-input>
        <currency-input
          label="Handling"
          v-bind:value.sync="handling"
        ></currency-input>
        <currency-input
          label="Discount"
          v-bind:value.sync="discount"
        ></currency-input>
  
        <p>Total: ${{ total }}</p>
      </div>
  
      <script>
        Vue.component("currency-input", {
          template:
            '\
              <div>\
                <label v-if="label">{{ label }}</label>\
                <input\
                  v-model="value | currency"\
                  v-on:focus="selectAll"\
                >\
              </div>\
            ',
          props: {
            value: {
              type: Number,
              default: 0,
              twoWay: true
            },
            label: {
              type: String,
              default: ""
            }
          },
          filters: {
            currency: {
              read: function(value) {
                return "$" + value.toFixed(2);
              },
              write: function(value) {
                var number = +value.replace(/[^\d.]/g, "");
                return isNaN(number) ? 0 : number;
              }
            }
          },
          methods: {
            selectAll: function(event) {
              // Workaround for Safari bug
              // http://stackoverflow.com/questions/1269722/selecting-text-on-focus-using-jquery-not-working-in-safari-and-chrome
              setTimeout(function() {
                event.target.select();
              }, 0);
            }
          }
        });
  
        new Vue({
          el: "#app",
          data: {
            price: 0,
            shipping: 0,
            handling: 0,
            discount: 0
          },
          computed: {
            total: function() {
              return this.price + this.shipping + this.handling - this.discount;
            }
          }
        });
      </script>
    </body>
  </html>
  