用到的幾種不同for循環寫法
代碼片段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
手機總價：{{totalPrice}}
</div>
</body>
<script>
const app = new Vue({
el: '#app',
data:{
phones: [
{id: 100, name: "蘋果手機", price: 11999},
{id: 101, name: "華爲手機", price: 10999},
{id: 102, name: "小米手機", price: 3899},
{id: 103, name: "vivo手機", price: 8999}
]
},
computed: {
totalPrice: function () {
let total =0
/* ES5 中的for循環寫法*/
/* for(let i=0;i<this.phones.length;i++){
total += this.phones[i].price;
}*/
/* for (let i in this.phones){
total += this.phones[i].price;
}*/
for (let phone of this.phones){
total += phone.price
}
return total
}
}
})
</script>
</html>