JSFiddle - React, Tailwind, and code Playground

by hunterliu

HTML

<div id="app">
  <p>{{ price | filterComma | filterDollarSign(priceStr) }}</p>
  <button @click="changePrice">click</button>
</div>

JavaScript

var vm = new Vue({
	el: '#app',
	data: {
  	price: 199999,
    priceStr: 'The price is '
  },
  methods: {
  	changePrice() {
    	this.price = 999999999;
    }
  },
  filters: {
  	filterDollarSign(price, arg1) {
    	console.log('filterDollarSign run');
    	return arg1 + '$' + price;
    },
    filterComma(price) {
    	console.log('filterComma run');
    	return price.toLocaleString('en-US');
    }
  }
})