<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>用插值表达式计算总价：￥{{shop[0].price*shop[0].count + shop[1].price*shop[1].count + shop[2].price*shop[2].count }}</p>
<!-- 调用计算属性totalprice，调用时不能加括号 -->
<p>第一次用计算属性计算商品总价：￥{{totalprice}}</p>
<!-- 第二次调用的时候，由于计算属性所依赖的商品数据没有发生改变，所以第二次调用计算属性的时候，Vue会直接从计算属性的缓存中取出上一次的调用计算属性时的计算结果，而不会重复执行计算属性的代码 -->
<p>第二次用计算属性计算商品总价：￥{{totalprice}}</p>
<!-- 方法是没有缓存的,所以调用了多少次,就会重复多少次方法执行方式 -->
<p>第一次用方法total计算商品总价:￥{{ total() }}</p>
<p>第二次用方法total计算商品总价:￥{{ total() }}</p>
<!-- 当修改totalprice和total所依赖的数据后，totalprice最多只执行一次，而total会执行多次 -->
<p>修改计算属性和方法所依赖的商品数据:<input type="number" v-model= "shop[1].count"></p>
<p>修改计算属性和方法不依赖的数据title:<input type="text" v-model = "title"></p>
</div>
<script>
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<this.shop.length;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<this.shop.length;i++){
sum = sum + this.shop[i].price * this.shop[i].count
}
return sum
}
}
})
</script>
</body>
</html>
172
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
