Vue中除了data和methods，還有一個(gè)computed屬性，它可以用來(lái)定義計(jì)算屬性。計(jì)算屬性是指基于已有的數(shù)據(jù)計(jì)算出新的數(shù)據(jù)。computed屬性是一個(gè)方法，而不是一個(gè)數(shù)據(jù)屬性。它定義的方法可以接受參數(shù)，也可以不接受參數(shù)。使用computed屬性的好處是，當(dāng)依賴(lài)的數(shù)據(jù)發(fā)生變化時(shí)，計(jì)算屬性會(huì)自動(dòng)重新計(jì)算新的值，而不需要手動(dòng)去更新數(shù)據(jù)。

<!--HTML代碼-->
<div id="app">
<p>原始價(jià)格：{{ price }}</p>
<p>折扣價(jià)：{{ discountPrice }}</p>
</div>
<!--Vue代碼-->
<script>
new Vue({
el: '#app',
data: {
price: 100,
discount: 0.8
},
computed: {
discountPrice: function() {
return this.price * this.discount;
}
}
});
</script>

在上述代碼中，我們定義了一個(gè)data屬性和一個(gè)computed屬性。price表示原始價(jià)格，discount表示折扣，discountPrice表示折扣后的價(jià)格。在computed屬性中定義了一個(gè)方法，用來(lái)計(jì)算折扣后的價(jià)格。當(dāng)price或discount發(fā)生變化時(shí)，discountPrice會(huì)自動(dòng)重新計(jì)算新的值。

<!--HTML代碼-->
<div id="app">
<input type="number" v-model="price">
<input type="number" v-model="discount">
<p>原始價(jià)格：{{ price }}</p>
<p>折扣價(jià)：{{ discountPrice }}</p>
</div>
<!--Vue代碼-->
<script>
new Vue({
el: '#app',
data: {
price: 100,
discount: 0.8
},
computed: {
discountPrice: function() {
return this.price * this.discount;
}
}
});
</script>

在上述代碼中，我們使用了v-model指令來(lái)綁定輸入框與數(shù)據(jù)屬性。當(dāng)輸入框的值發(fā)生變化時(shí)，price或discount會(huì)自動(dòng)更新。因?yàn)閐iscountPrice依賴(lài)于price和discount，所以當(dāng)任何一個(gè)值發(fā)生變化時(shí)，discountPrice都會(huì)自動(dòng)更新。