Vue学习 —— 计算属性

1、计算属性介绍一句话介绍计算属性本质就是基于已有数据做 “加工”结果会缓存只有依赖数据变了才重新算。更简单易懂的例子用大白话讲就像你有苹果和梨原始数据计算属性就是把它们切好拼成的水果盘 —— 只要苹果 / 梨没换水果盘就不用重做只有换了苹果 / 梨才会重新拼。2、实战举2个例子1、缓存时间!DOCTYPE html html head meta charsetutf-8 script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script title计算属性/title /head body div id app p当前时间{{getCurrentTime()}}/p p当前属性{{getCurrentTime1}}/p /div /body script var app new Vue({ el: #app, // 方法 methods:{ getCurrentTime:function(){ return Date.now(); } }, //计算属性属性名字和方法名不能重复 computed:{ getCurrentTime1:function(){ return Date.now(); } } }) /script /html结果展示执行html文件后结果如下都是时间戳看不出差别再查看属性时可以看出差别属性被缓存起来了2、购物车算价!DOCTYPE html html head meta charsetutf-8 script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script title计算属性举例2/title /head body div id app !--普通数据挂载绑定-- p请输入第1个数input typenumber v-modelnum1/p p请输入第2个数input typenumber v-modelnum2/p h2两数之和{{sum}}/h2 h2两数乘积{{product}}/h2 /div /body script var app new Vue({ el: #app, data: { num1: 12, num2: 15 }, //计算属性 computed: { //计算2数之和 sum(){ return Number(this.num1) Number(this.num2); }, //计算2数乘机 product(){ return Number(this.num1) * Number(this.num2) } } }) /script /html查看结果两数之和以及两数乘积可以通过变化num1和num2进行变化3、问题大概知道是什么但是缺少真实使用场景