01-计算属性的基础使用
下例为计算属性的使用方式：
<script src="../js/vue.js"></script>
<div id="app">
<h2>{{firstName+' '+lastName}}</h2>
<h2>{{getName()}}</h2>
<h2>{{fullName}}</h2>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
firstName:'Gui',
lastName:'Gethin',
},
computed:{
fullName:function () {
return this.firstName+' '+this.lastName
}
},
methods:{
getName:function () {
return this.firstName+' '+this.lastName
}
}
})
</script>
02-计算属性的复杂操作
下例为使用方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="../js/vue.js"></script>
<div id="app">
<h2>总价格：{{totalprice}}</h2>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
books:[
{
id:110,
name:'vue',
price:10},
{
id:99,
name:'script',
price:10
},
{
id:100,
name:'java',
price:20
}
]
},
computed:{
totalprice:function () {
let result=0;
for (let i=0;i<this.books.length;i++){
result +=this.books[i].price
}
return result
}
}
})
</script>
</body>
</html>
