JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.rawgit.com/yyx990803/vue/0.11.0-rc2/dist/vue.js"></script>
<div id='test'>
<input type="text" v-model="testComp | formatNumber" /> {{test}}
<br><br>
<button v-on="click: show">show</button>
</div>
CSS
input, button {
font-size: 20pt;
}
JavaScript
Vue.filter('formatNumber', function(value) {
var v = value.toString().replace(/ /g, '');
if (v.length > 3) {
var groups = Math.floor((v.length - 1) / 3);
for (var i = groups - 1 ; i >= 0; i--) {
var sub = -(3 * (i + 1)),
l = v.length,
front = v.substr(0, l + sub),
tail = v.substr(sub);
v = front + ' ' + tail;
}
}
return v;
});
new Vue({
el: 'test',
data: {
test: '0'
},
methods: {
show: function() {
console.log(this.$data);
}
},
computed: {
testComp: {
get: function() {
return this.test;
},
set: function(value) {
this.test = Vue.filter('formatNumber')(value)
}
}
}
});