计算属性
概念：基于现有的数据进行计算出新的数据。依赖的数据变化，自动重新计算。
语法：
声明在computed配置项中，一个计算属性对应的是一个函数
使用起来跟普通属性一样{{计算属性名}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
th {
width: 100px;
height: 20px;
}
td {
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<h2>小白痴仓库清单</h2>
<table border="1">
<tr>
<th>名字</th>
<th>数量</th>
</tr>
<tr v-for="(item,index) in list" ::key="item.id">
<td>{{item.name}}</td>
<td>{{item.num}}个</td>
</tr>
</table>
<br>
总库存量：{{totalCount}}个
</div>
<!-- 引入是开发版本的包 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
list: [{ id: 1, name: '篮球', num: 1 }, { id: 2, name: '足球', num: 6 }, { id: 3, name: '乒乓球', num: 8 }]
},
methods: {
},
//计算
computed: {
totalCount() {
//求和对this.list数组的num进行求和 用到了reduce函数
let total = this.list.reduce((sum, item) => sum + item.num, 0)
return total
}
}
})
</script>
</body>
</html>