Vue的計算屬性(Computed)是一個在模板中聲明式依賴的響應式屬性,它的返回值會被緩存起來直到它依賴的響應式屬性發生了變化。
VUE計算屬性常常會被用來在模板中處理一些復雜的邏輯。在Vue中,computed是一個JavaScript對象,它里面可以定義一些屬性,這些屬性就像是我們平時定義的一個函數一樣,可以在模板文件中調用。
computed:{ totalPrice(){ return this.price * this.quantity } }
在上面這個例子中,我們定義了一個totalPrice屬性,它會返回price與quantity的乘積,computed屬性的方式,與普通屬性的使用方式類似,我們可以在模板文件中像使用普通屬性一樣使用它。
computed屬性的優勢在于它會緩存計算結果,只在相關響應式變量發生變化時才進行計算,這樣可以提高代碼的運行效率。
除了可以通過computed屬性來計算屬性值,我們還可以通過class的方式來定義一個計算屬性。
class MyComputed{ get totalPrice(){ return this.price * this.quantity } } data(){ return new MyComputed() }
上面這個例子中,我們定義了一個名為MyComputed的class,它有一個totalPrice的屬性,它的計算方式同樣是返回price與quantity的乘積。我們將它實例化后將它返回給Vue實例中的data()函數,就可以通過模板中的{{$data.totalPrice}}方式來引用它。
這種方式雖然寫起來略微復雜,但是如果我們需要在計算屬性中加入一些計算邏輯或者邏輯上的優化,這種方式就更加靈活和方便。
上一篇python 調用詞典
下一篇mysql判斷拼接