Vue JS 2 বাংলা টিউটোরিয়াল #9 Computed Properties এর সোর্স কোড :
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Vue Js Bangla Tutorial</title>
</head>
<body>
<div id="root">
<h1>All Payments</h1> <hr>
<ul>
<li v-for="(p, i) in payments">
<p>
{{p.name}} -> {{p.amount}}
</p>
</li>
</ul>
<strong>
Total Amount: {{ totalAmount }}
</strong>
<!-- <h1>Unpaid Payments</h1> <hr>
<ul>
<li v-for="(p, i) in unPaidPayments">
<p>
{{p.name}} -> {{p.amount}}
</p>
</li>
</ul>
-->
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#root",
data: {
payments: [
{name: "houseRent", amount: 15000, paid: false },
{name: "gas", amount: 700, paid: true },
{name: "electricity", amount: 1000, paid: false },
{name: "water", amount: 800, paid: true },
{name: "net", amount: 1200, paid: false }
]
},
computed: {
unPaidPayments: function(){
var unpaid = this.payments.filter(function(payment){
return payment.paid;
});
return unpaid;
},
totalAmount: function(){
var total = 0;
for(var i=0; i< this.payments.length; i++){
total += this.payments[i].amount;
}
return total;
}
}
});
</script>
</body>
</html>