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

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

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

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

<template>
<div>
<p>商品名稱：{{name}}</p>
<p>商品價格：{{price}}元</p>
<p>優(yōu)惠價格：{{discountPrice}}元</p>
<p>數(shù)量：<input v-model="quantity"/></p>
<p>總價：{{totalPrice}}元</p>
</div>
</template>
<script>
export default {
data() {
return {
name: "Vue實戰(zhàn)教程",
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>

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

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