<div id="app">
<table class="table">
<tbody>
<tr is="row-component" v-for="(item, key) in data" :item="item" :key="key"></tr>
</tbody>
</table>
{{ data[1].cash | currency | dollarSign }}
</div>
<script type="text/x-template" id="row-component">
<tr>
<td>{{ item.name }}</td>
<td>{{ item.cash | currency}}</td>
<td>{{ item.icash | currency | dollarSign}}</td>
</tr>
</script>
Vue.filter('dollarSign', function(n){
return `$ ${n}`
})
Vue.filter('currency', function(n){
return n.toFixed(2).replace(/./g, function(c, i, a) {
return i && c !== "." && ((a.length - i) % 3 === 0) ? ',' + c : c;
});
})
var child = {
props: ['item'],
template: '#row-component',
data: function() {
return {
data: {}
}
},
mounted: function() {
console.log('Component:', this)
}
}
var app = new Vue({
el: '#app',
data: {
data: [
{
name: '小明',
cash: 100,
icash: 500,
},
{
name: '杰倫',
cash: 10000,
icash: 5000,
},
{
name: '漂亮阿姨',
cash: 500,
icash: 500,
},
{
name: '老媽',
cash: 10000,
icash: 100,
},
]
},
components: {
"row-component": child
},
mounted: function() {
console.log('Vue init:', this)
}
});
