第vue中的計算屬性傳參目錄vue計算屬性傳參我們來看看下面的示例vue計算屬性傳參,根據(jù)值不同,渲染相應(yīng)的內(nèi)容業(yè)務(wù)描述

vue計算屬性傳參

最近很多小伙伴問到，計算屬性怎么做到像普通函數(shù)一樣傳參呢？

針對這個問題

我們來看看下面的示例

template

p{{getCallerName}}/p

/template

script

exportdefault{

props:{

callRecord:{

type:Object,

default:()=({}),

}

},

computed:{

//獲取名稱

getCallerName(){

return'callerName'

},

}

}

這個示例，我們接收一個從父組件傳過來的屬性值callRecord，對象類型

需求：我們需要根據(jù)接收值中的type字段，去判斷應(yīng)該解析名稱為主叫名稱還是被叫名稱

因為計算屬性具有緩存效果，所以我們期望用計算屬性去獲?。ó斎?，過濾器也能使用，方法有很多，這里不用較真）

所以，這里我們就要想辦法把我們的值當做參數(shù)傳進去。

官網(wǎng)并沒解釋計算屬性應(yīng)該怎么傳值，但是呢，計算屬性都會返回一個值，基于這個條件，我們就想到了另一個只知識點閉包

閉包：閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)，簡單點說，就是嵌套函數(shù)（關(guān)于閉包的解釋和使用，大家可以查閱相關(guān)資料，這里就不過多贅述了）

有了思路，我們就開始試試看

template

p{{getCallerName(callRecord)}}/p

/template

script

exportdefault{

props:{

callRecord:{

type:Object,

default:()=({}),

}

},

computed:{

//獲取名稱

getCallerName(){

returncallRecord={

if(callRecord.type===1||callRecord.type===2)returncallRecord.callerName;

returncallerInfo.callerNumber;

};

},

}

}

觀察兩段代碼可以看出，我們在計算屬性里return了一個函數(shù)，這個函數(shù)的參數(shù)即我們傳入的值，而內(nèi)部也能直接拿到并使用這個值，這樣就做到了計算屬性傳參（當然，多個參數(shù)也是可行的）

好了，以上就是對計算屬性如何傳參的介紹使用

vue計算屬性傳參,根據(jù)值不同,渲染相應(yīng)的內(nèi)容

業(yè)務(wù)描述

在開發(fā)項目過程中，后臺傳過來一個數(shù)組，根據(jù)類型顯示相應(yīng)內(nèi)容。

1、可以直接在渲染出用三目表達式選擇渲染內(nèi)容?？煽蛇x擇的條件多了，就不適用了，也不利于擴展。

2、采用計算屬性。

templatev-for="(item,index)inlanguageAddDataArray"

el-form-item:label=getLanguageType(item.languageType)

el-inputv-model="item.content"

auto-complete="off"size="mini"/el-input

/el-form-item

/template

script

exportdefault{

data(){

languageAddDataArray:[],

},

computed:{

getLanguageType(){

returnfunction(type){

r