UA-Compatible" content="IE=edge">
用插值表达式计算总价:¥{{shop[0].price*shop[0].count + shop[1].price*shop[1].count + shop[2].price*shop[2].count }}
第一次用计算属性计算商品总价:¥{{totalprice}}
第二次用计算属性计算商品总价:¥{{totalprice}}
第一次用方法total计算商品总价:¥{{ total() }}
第二次用方法total计算商品总价:¥{{ total() }}
修改计算属性和方法所依赖的商品数据:
修改计算属性和方法不依赖的数据title:
let vm = new Vue({
el:'#app',
data:{
title:'购物车',
shop:[
{
name:'OPPO R15',
price:2999,
count:3
},
{
name:'华为P20',
price:2699,
count:2
},
{
name:'苹果13',
price:1999,
count:4
}
]
},
computed:{
// 定义第一具体的totalprice计算机属性
// 计算机属性就是一个函数
totalprice:function(){
console.log('计算属性totalprice被调用了一次')
let sum = 0 //总价
for(let i=0; i sum = sum + this.shop[i].price * this.shop[i].count } // 计算属性最后必须把计算结果return返回 return sum } }, methods:{ total:function(){ console.log('方法total被调用了一次') let sum = 0 //总价 for(let i=0; i sum = sum + this.shop[i].price * this.shop[i].count } return sum } } })