Vue的computed屬性可以在模板中綁定并返回計算結果。在有些場景下,我們需要在computed屬性中傳遞參數,那么該如何做呢?下面我們就來介紹一下Vue computed傳遞參數的方法。
computed: {
totalPrice: function() {
return this.price * this.quantity;
}
}
上面這段代碼是最常見的computed屬性的使用方式,其中price和quantity是組件中的data屬性。而當我們需要根據不同的參數返回不同的結果時,我們可以使用函數的方式定義計算屬性,也就是使用帶參的計算屬性。
computed: {
totalPrice: function() {
return function(param) {
return param * this.quantity;
}
}
}
上面這段代碼中的totalPrice是一個函數,可以接受一個參數,我們將其命名為param。此時,計算結果是param和quantity兩個值的積。
在組件中使用帶參的計算屬性時,我們需要將參數傳遞給計算屬性,具體方式是在模板中使用調用函數的方式。
{{ totalPrice(10)}}
上面這段代碼中,我們調用了totalPrice函數,并且將10作為函數的參數傳遞進去。此時,計算結果將是10和quantity兩個值的積。
有時候我們需要傳遞多個參數,此時我們可以通過對象的方式傳遞參數。
computed: {
totalPrice: function() {
return function({price, quantity}) {
return price * quantity;
}
}
}
上面這段代碼中,我們使用對象的方式傳遞了兩個參數,分別為price和quantity。計算結果是這兩個值的積。
在模板中,我們也需要將參數用對象的方式傳遞給計算屬性。
{{ totalPrice({price: 10, quantity: 2}) }}
上面這段代碼,我們使用對象的方式將price和quantity傳遞給了totalPrice函數。計算結果是20。
以上就是Vue computed傳遞參數的方法,通過這些方式我們可以很方便地使用帶參的計算屬性來實現業務邏輯的計算。
上一篇c 返回的json轉義
下一篇d3.json 跨域