計算價格在開發網站或者電商平臺中是非常常見的。在Vue中，我們可以利用計算屬性來實現價格的計算。計算屬性是一種計算模型，我們可以在模板中使用它們的值，類似于JavaScript的函數。

<template>
<div>
<p>商品名稱：{{name}}</p>
<p>商品價格：{{price}}元</p>
<p>優惠價格：{{discountPrice}}元</p>
</div>
</template>
<script>
export default {
data() {
return {
name: "Vue實戰教程",
price: 100,
discount: 0.8
};
},
computed: {
discountPrice() {
return this.price * this.discount;
}
}
};
</script>

在上述代碼中，我們定義了三個模板變量：商品名稱、商品價格、優惠價格。然后在計算屬性中，我們定義了一個discountPrice函數，來計算出打折后的價格。我們可以在模板中使用這個discountPrice函數，來顯示實際的價格。

除了使用computed屬性來計算價格外，我們還可以使用watch屬性來監聽輸入框的變化，然后實時計算價格。

<template>
<div>
<p>商品名稱：{{name}}</p>
<p>商品價格：{{price}}元</p>
<p>優惠價格：{{discountPrice}}元</p>
<p>數量：<input v-model="quantity"/></p>
<p>總價：{{totalPrice}}元</p>
</div>
</template>
<script>
export default {
data() {
return {
name: "Vue實戰教程",
price: 100,
discount: 0.8,
quantity: 1
};
},
computed: {
discountPrice() {
return this.price * this.discount;
},
totalPrice() {
return this.quantity * this.discountPrice;
}
},
watch: {
quantity: function(newValue, oldValue) {
console.log('quantity changed from ' + oldValue + ' to ' + newValue);
}
}
};
</script>

在上述代碼中，我們新增了一個數量輸入框，并且定義了一個totalPrice計算屬性來計算總價。在watch屬性中，我們監聽了quantity變量的變化，并且輸出了新舊值，用于調試和記錄變化。

在實際開發中，我們需要根據復雜的業務邏輯來計算價格，Vue提供了非常強大的計算屬性和watch屬性來幫助我們更加高效地進行開發。