<div id="app">
<table class="table">
<tbody>
<tr is="row-component" v-for="(item, key) in data"
:item="item" :key="key"></tr>
<tr is="row-component-two" v-for="(item, key) in data"
:item="item"></tr>
</tbody>
</table>
</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>
var mixinFilter = {
template: '#row-component',
filters:{
dollarSign: function (n) {
return `$ ${n}`
},
currency: function(n) {
return n.toFixed(2).replace(/./g, function(c, i, a) {
return i && c !== "." && ((a.length - i) % 3 === 0) ? ',' + c : c;
});
}
}
}
var mixinMounted = {
mounted () {
console.log('這段是 Mixin 產生');
}
}
Vue.component('row-component', {
props: ['item'],
data: function() {
return {
data: {},
}
},
mixins:[mixinFilter,mixinMounted]
});
Vue.component('row-component-two', {
props: ['item'],
data: function() {
return {
data: {
data: 'two'
},
}
},
mounted(){
console.log('childTwo', this);
},
mixins:[mixinFilter,mixinMounted]
});
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,
},
]
},
mounted: function() {
console.log('Vue init:', this)
}
});
