<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="gbk">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 涔︾殑鎬讳环鏍? -->
<h2>总价为:{{totalPrice}}</h2>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
books: [{
id: 110,
name: 'unix编译原理',
price: 100
}, {
id: 111,
name: '浠g爜澶у叏',
price: 99
}, {
id: 112,
name: '娣卞叆鐞嗚В璁$畻鏈哄師鐞?',
price: 56
}, {
id: 113,
name: '鐜颁唬鎿嶄綔绯荤粺',
price: 199
}, ]
},
computed: {
totalPrice() {
let result = 0
for (let i = 0; i < this.books.length; i++) {
result += this.books[i].price
}
return result
//es6语法
for (let i in this.books) {
console.log(books[i])
}
for (let book of this.books) {
console.log(book)
}
}
}
})
</script>
</html>
计算属性的复杂操作
最新推荐文章于 2020-11-15 01:15:15 发布