概念：基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。
语法：
1）声明在computed配置项中，一个计算属性对应一个函数。
2）使用起来和普通属性一样使用{{计算属性名}}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="Author" content=""/>
<meta name="Keywords" content=""/>
<meta name="Description" content=""/>
<style>
table tr td{
border:2px solid #000;
width:50px;
text-align:center;
}
</style>
</head>
<body>
<div id="app">
<h3>礼物清单</h3>
<table style="border:2px solid #000;">
<tr>
<td>名字</td>
<td>数量</td>
</tr>
<tr v-for="(item,index) in list" :key="item.id">
<td>{{item.name}}</td>
<td>{{item.num}}个</td>
</tr>
</table>
<p>礼物总数：{{totalCount}}个</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
list:[
{id:1,name:'篮球',num:1},
{id:2,name:'玩具',num:2},
{id:3,name:'铅笔',num:5}
]
},
computed:{
totalCount(){
let total=this.list.reduce((sum,item)=>sum+item.num,0)
return total
}
}
})
</script>
</html>
