Vue计算属性——computed

.car{width:1200px;height:228px;bord呃：2pxsolid#000；显示：弹性；证明内容：周围空间；对齐项目：居中；保证金：0自动；边距顶部：6px；溢出：隐藏；}.pimg{高度：200px；}.car>div{宽度：220px；高度：250px；位置：相对；}.car>div>h2{margin-top:12px;}.car_head{宽度：1200px；高度：70px；边框：2px实心#000；保证金：0自动；显示：弹性；证明内容：周围空间；对齐项目：居中；}.check_box{宽度：1200px；高度：70px；边框：2px实心#000；保证金：0自动；顶部边距：12px；位置：相对；}.check_box>h2{位置：绝对；顶部：50%；变换：翻译Y(-50%)；}.check_box>h2:first-child{右：200px；}.check_box>h2:last-child{左：1002px；}.pdetail>p{字体大小：12px；颜色：#909399；}.pdetail>p,.price>p,.total>p,.num_box{position:absolute;顶部：50%；特拉nsform:翻译Y(-50%);}.price>p,.total>p,.num_box{字体大小：22px；左：50%；转换：translateX(-50%)；}.num_box{宽度：200px;高度：36px；显示：弹性；证明内容：周围空间；}.num_box>输入{宽度：86px；字体大小：22px；左填充：6px；{宽度：36px；今天通过一个购物车的案例来简单的讲解一下vue的计算属性。在vue中，我们经常需要在返回前对数据进行操作。通常我们需要写一个相关的操作函数来对这些数据进行操作，但是现在vue为这种数据处理提供了一种新的思路——计算属性。在这个例子中，总价的数据使用了这个属性。1、先做一个简单的购物车界面，长这样：把代码贴在下面.car{width:1200px;height:228px;bord呃：2pxsolid#000；显示：弹性；证明内容：周围空间；对齐项目：居中；保证金：0自动；边距顶部：6px；溢出：隐藏；}.pimg{高度：200px；}.car>div{宽度：220px；高度：250px；位置：相对；}.car>div>h2{margin-top:12px;}.car_head{宽度：1200px；高度：70px；边框：2px实心#000；保证金：0自动；显示：弹性；证明内容：周围空间；对齐项目：居中；}.check_box{宽度：1200px；高度：70px；边框：2px实心#000；保证金：0自动；顶部边距：12px；位置：相对；}.check_box>h2{位置：绝对；顶部：50%；变换：翻译Y(-50%)；}.check_box>h2:first-child{右：200px；}.check_box>h2:last-child{左：1002px；}.pdetail>p{字体大小：12px；颜色：#909399；}.pdetail>p,.price>p,.total>p,.num_box{position:absolute;顶部：50%；特拉nsform:翻译Y(-50%);}.price>p,.total>p,.num_box{字体大小：22px；左：50%；转换：translateX(-50%)；}.num_box{宽度：200px;高度：36px；显示：弹性；证明内容：周围空间；}.num_box>输入{宽度：86px；字体大小：22px；左填充：6px；{宽度：36px；2.第二步，需要在methods中添加downPrice(index)和addPrice(index)函数绑定购买数量两个按钮，分别实现加减功能。这里的原因是传递了形参index，因为下标对应的商品总价需要根据数组的下标进行变化代码如下：methods:{addPrice(data){this.products[data].p_number+=1;this.products[data].total=this.products[data].p_number*this.products[data].p_price;},downPrice(data){if(this.products[data].p_number>0){this.products[data].p_number-=1;this.products[data].total=this.products[data].p_number*this.products[data].p_price;}}}这样，我们就实现了修改单个商品总价的功能，（因为computed计算属性中的函数不能传参，所以无法获取数组下标中商品对应的值,所以目前我只想到用这个方法来解决添加单个商品的需求）注：这里的输入双向绑定了数组中每一项的p_number，每项的总价在两个相加减法函数表示等于商品单价乘以采购数量。此时箭头处的单个商品的总价可以随着进货数量的变化而变化，但是所有商品的总价是不能变化的。这里我们使用calculation属性来计算总价。3.先添加几组假数据，让购物车看起来更真实。资料在这里（自行收集）：products:[{img_src:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eb69512d9d6430d865d457ec52eebb51.png?thumb=1&w=200&h=200&f=webp&q=90",p_name:"小米11至尊纪念版",p_detail:"1.12''GN2｜128°超广角｜120X超长焦｜2K四微曲面屏｜骁龙888｜IP68防水｜67W有线闪充｜67W无线闪充｜10W无线反充｜5000mAh大电池｜LPDDR5｜WiFi6（增强版）｜哈曼卡顿音响认证｜立体双喇叭",p_price:6499,p_number:0,total:0},{img_src:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/34caee2c867bfd8c5e0dc2d8c663e121.jpg?thumb=1&w=200&h=200&f=webp&q=90",p_name:"小米11Pro",p_detail:"1.12''GN2｜骁龙888｜2K四微曲面屏｜IP68防水｜67W有线闪充｜67W无线闪充｜10W无线反向充电｜5000mAh超级电池｜LPDDR5｜WiFi6（增强版）｜哈曼卡顿音响认证｜立体双喇叭",p_price:4999,p_number:0,total:0},{img_src:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cb554f30eaa0316b0a736c3d59f21584.png?thumb=1&w=200&h=200&f=webp&q=90",p_name:"小米11青春版",p_detail:"轻薄炫彩/骁龙780G/专业电影相机，前置超级夜景/AMOLED柔性直屏/超线性立体双扬声器",p_price:2299,p_number:0,total:0},{img_src:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d47f7ecaa04d92bf2790d4a5d53d9099.png?thumb=1&w=200&h=200&f=webp&q=90",p_name:"黑鲨4Pro",p_detail:"骁龙888|加强版UFS3.1+SSD磁盘阵列系统|高品质双扬声器，DXOMARK音频评分第一|120W极速闪充+4500mAh双电竞电池|磁性升降肩键|144Hz三星E4屏幕",p_price:4499,p_number:0,total:0},{img_src:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b3553083a4975325eab6470d94465548.jpg?thumb=1&w=200&h=200&f=webp&q=90",p_name:"小米10S",p_detail:"骁龙870|对称双喇叭立体声|1亿像素8K电影摄影机|33W有线快充|30W无线快充|10W反向充电|4780mAh超大电池|LPDDR5+UFS3.0+Wi-Fi6|VC液冷|双模5G",p_price:3299,p_number:0,total:0},{img_src:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/68217751d12b1bfd2f9766e458b5e2dd.jpg?thumb=1&w=200&h=200&f=webp&q=90",p_name:"RedmiK40Pro",p_detail:"骁龙888/E4旗舰直屏/120Hz高刷新率/杜比全景声/4520mAh大电池/WiFi6增强版/7.8mm轻薄机身/多功能NFC/红外遥控",p_price:3699,p_number:0,total:0},{img_src:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/73617424da6ff6b64f9c630387bca874.jpg?thumb=1&w=200&h=200&f=webp&q=90",p_name:"RedmiK40",p_detail:"骁龙870/新一代E4AMOLED旗舰直屏/杜比全景声/7.8mm轻薄机身设计/4520mAh大电池/360Hz三指触控/120Hz高刷新/X轴线性马达/NFC/红外遥控",p_price:2199,p_number:0,total:0}]此时的渲染效果如下：还是那个样子4.接下来，我们将使用When说到计算属性，我们在computed中声明一个方法，类似于watch中的属性会随时被监听，但是computed中的逻辑和watch相反，它的值随着它相关的变化而被动变化value，这里的总价应该是每件商品的总价之和，所以我们可以遍历products数组，然后将每件商品的总价相加得到总价。代码如下：all:function(){letall=0;for(vari=0;i

合计：

￥{{all}}