Currency often ends up in tables and they need to be aligned; let's see how that will work out. We begin with this HMTL table:
<div id="app"> <table> <thead> <tr> <th>Item</th> <th>Price</th> </tr> </thead> <tbody> <tr v-for="item in inventory"> <td>{{item.name}}</td> <td>{{item.price}} </td> </tr> </tbody> </table> </div>
We are iterating an inventory that, of course, we need to specify in our JavaScript:
new Vue({ el:'#app', data: { inventory: [ {name: 'tape measure', price: '7'}, {name: 'stamp', price: '0.01'}, {name: 'shark tooth', price: '1.5'}, {name: 'iphone', price: '999'} ] } })
At this point, we have a table with the prices rendered on the page, but there is no currency symbol, no consistency ...
