明天通过一个购物车的案例简略论述一下vue的计算属性，在vue中咱们往往须要对数据进行操作后再返回，通常咱们须要写一个相干的操作函数来对这些数据进行操作，不过当初vue给这样的数据处理提供了新思路——计算属性。在本例中总价的数据就是利用了该属性。
1.先做一个简略的购物车界面，进去大略是这个样子：
把代码贴下边
<template> <div class="home"> <Head v-bind:hname="head_name" /> <div class="car_head"> <h2>商品图片</h2> <h2>商品详情</h2> <h2>商品单价</h2> <h2>购买数量</h2> <h2>单品总价</h2> </div> <div class="car" v-for="(item,index) of products" :key="index"> <div class="p_img">  <p>{{item.p_name}}</p> </div> <div class="pdetail"> <p>{{item.p_detail}}</p> </div> <div class="price"> <p>￥{{item.p_price}}</p> </div> <div class="count"> <div class="num_box"> <button>-</button> <input type="text" v-model="item.p_number"> <button>+</button> </div> </div> <div class="total"> <p v-if="item.total === 0">未抉择数量</p> <p v-else>￥{{item.total}}</p> </div> </div> <div class="check_box"> <h2>总计:</h2> <h2>0</h2> </div> </div></template><script>import Head from "@/components/Head"export default { name: 'Home', components: { Head }, data(){ return{ head_name:"shopCar", 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 Ultra", p_detail:"1.12''GN2｜128°超广角｜120X超长焦｜2K四微曲屏｜骁龙888｜IP68级防水｜67W 有线闪充｜67W 无线闪充｜10W 无线反充｜5000mAh超大电池｜LPDDR5｜WiFi6（增强版）｜哈曼卡顿音频认证｜立体声双扬声器", p_price:6499, p_number:0, total:0 } ] } }}</script><style scoped> .car{ width: 1200px; height: 228px; border: 2px solid #000; display: flex; justify-content: space-around; align-items: center; margin: 0 auto; margin-top: 6px; overflow: hidden; } .pimg{ height: 200px; } .car>div{ width: 220px; height: 250px; position: relative; } .car>div>h2{ margin-top: 12px; } .car_head{ width: 1200px; height: 70px; border: 2px solid #000; margin: 0 auto; display: flex; justify-content: space-around; align-items: center; } .check_box{ width: 1200px; height: 70px; border: 2px solid #000; margin: 0 auto; margin-top: 12px; position: relative; } .check_box>h2{ position: absolute; top: 50%; transform: translateY(-50%); } .check_box>h2:first-child{ right: 200px; } .check_box>h2:last-child{ left: 1002px; } .pdetail>p{ font-size: 12px; color: #909399; } .pdetail>p,.price>p,.total>p,.num_box{ position: absolute; top: 50%; transform: translateY(-50%); } .price>p,.total>p,.num_box{ font-size: 22px; left: 50%; transform: translateX(-50%); } .num_box{ width: 200px; height: 36px; display: flex; justify-content: space-around; } .num_box>input{ width: 86px; font-size: 22px; padding-left: 6px; text-align: center; } .num_box>button{ width: 36px; }</style>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计算属性里的函数不能传参，不能获取该项商品在数组内所对应的下标，因而目前只想到了用这种办法来解决单个商品相加的需要）留神：这里的input是与数组每一项的p_number双向绑定的，而每一项的总价又在两个加减函数中阐明了等于该项的单价乘以购买数量。
此时箭头处的的单品总价曾经能够随着购买数量的变动而扭转了，然而所有商品的总价还不能变的，这里咱们就用计算属性来计算总价。
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 Ultra", 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:"小米11 Pro", 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:"黑鲨4 Pro", 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-Fi 6 | 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:"Redmi K40 Pro", p_detail:"骁龙888 / E4 旗舰直屏 / 120Hz高刷 / 杜比全景声 / 4520mAh大电量 / WiFi 6 增强版 / 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:"Redmi K40", p_detail:"骁龙870 / 新一代 E4 AMOLED旗舰直屏 / 杜比全景声 / 7.8mm轻薄机身设计 / 4520mAh大电量/ 360Hz 三指触控 / 120Hz 高刷新 / X轴线性马达 / NFC / 红外遥控", p_price:2199, p_number:0, total:0 } ]此时的渲染成果是这样的：
看起来还是像那么回事的。
4.接下来就要用到计算属性了，咱们在computed里申明一个办法，相似于watch里的属性会随时被监听一样，子不过computed里的逻辑与watch相同，其值是也随着与其相干的值的变动而被动变动，此例中总价应该是每一个单品的总价和，因而咱们能够遍历products数组，而后将每一项的总价相加以失去总价。
代码如下：
all:function(){ let all = 0; for(var i = 0;i < this.products.length;i ++){ all += this.products[i].total; } return all; }这里的all会就是该函数中返回的products数组中每一项的total的和，all能够间接通过双花括号渲染到视图层里。
因而咱们还须要将html代码中的总计局部批改成这样：
<div class="check_box"> <h2>总计:</h2> <h2>￥{{all}}</h2> </div>这样一来all就会通过解决(本例中是求每一项total的和，其余操作也能够)后，间接渲染到页面上了。
再来试一试：
此时咱们购买最初三种商品试一试，3299+14796+4398=22493，后果正确。
总之，vue的computed就是将某个参数在computed中通过解决后再间接返回，而页面上也能够间接通过双花括号来渲染，极大的进步了开发效率，升高了开发难度。