Vue框架提供了Computed屬性來實現(xiàn)計算一個值基于監(jiān)測到的數(shù)據(jù)，并返回計算結(jié)果的情形。Computed屬性可以直接通過模板中的插值表達(dá)式或者綁定屬性使用。除此之外，Vue還提供了過濾器的方案，用于管道式的過濾值，過濾器非常適合用于一些常見的文本格式化操作，比如大小寫轉(zhuǎn)換或者日期格式化。Computed屬性和過濾器在數(shù)據(jù)處理和綁定上使得Vue框架更加強(qiáng)大且易于使用。

下面給出一個例子，假設(shè)我們有一個數(shù)組，包含了很多數(shù)字，我們想要計算數(shù)組中的最大值，最小值和平均值。我們可以利用Computed屬性來實現(xiàn)這個功能，具體代碼如下：

data() {
return {
numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}
},
computed: {
max() {
return Math.max(...this.numbers);
},
min() {
return Math.min(...this.numbers);
},
average() {
return this.numbers.reduce((a, b) =>a + b) / this.numbers.length;
}
}

我們還可以使用過濾器來美化展示我們的結(jié)果。下面我們用過濾器格式化數(shù)字，保留2位小數(shù)。為此，我們需要定義一下過濾器：

Vue.filter('decimal', function (value) {
return value.toFixed(2);
})

接下來，我們就可以在模板中使用這個過濾器，對Computed屬性的結(jié)果進(jìn)行過濾了：

數(shù)組最大值為：{{ max | decimal }}
數(shù)組最小值為：{{ min | decimal }}
數(shù)組平均值為：{{ average | decimal }}

以上就是Vue框架中Computed屬性和過濾器的基本演示。在Vue中，使用Computed屬性和過濾器實現(xiàn)數(shù)據(jù)處理和綁定非常的方便，能夠為我們帶來很大的幫助。如果你還沒有使用過Computed屬性或者過濾器的話，不要猶豫，現(xiàn)在就開始使用吧！