在Vue開發(fā)中，很多時候都需要合計數(shù)量。比如說在購物車頁面，我們需要計算選中商品的總價。Vue提供了方便的computed計算屬性來解決這個問題。

首先，在Vue實例中定義一個數(shù)組，用來存放所有商品的信息。每個商品信息包括商品名稱、價格、數(shù)量、是否選中等信息。

data: {
products: [
{name: '商品1', price: 10, quantity: 2, selected: true},
{name: '商品2', price: 20, quantity: 1, selected: false},
{name: '商品3', price: 30, quantity: 3, selected: true},
]
}

接下來，在頁面中展示商品列表，并在每個商品后面加上一個復(fù)選框來表示選中狀態(tài)。同時，在頁面上展示一個總價，用于計算所有選中商品的總價。

<div v-for="(product, index) in products" :key="index">
<input type="checkbox" v-model="product.selected">{{ product.name }} - {{ product.price }}元 x {{product.quantity}}個
</div>
總價：{{ totalPrice }}

現(xiàn)在，我們需要計算選中商品的總價。Vue提供了computed計算屬性來處理這個問題。我們定義一個computed屬性totalPrice，根據(jù)選中商品的數(shù)量和價格來計算總價。

computed: {
totalPrice: function() {
var total = 0;
for (var i = 0; i < this.products.length; i++) {
var product = this.products[i];
if (product.selected) {
total += product.price * product.quantity;
}
}
return total;
}
}

代碼解釋：我們在computed屬性中定義了一個函數(shù)，用來計算選中商品的總價。函數(shù)中定義了一個變量total，用來存儲總價。然后遍歷所有商品，如果商品被選中，則將商品價格乘以數(shù)量加入到total中。最后返回total。

這樣，我們就可以輕松地計算選中商品的總價，并實時更新在頁面上。當選中商品的選中狀態(tài)發(fā)生改變時，totalPrice也會實時更新。