27 May, 2018

টিউটোরিয়াল

rimonmath

863 views


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>