vue中的計(jì)算屬性傳參

更新時(shí)間：2022年08月31日 10:13:22 作者：壞丶毛病

這篇文章主要介紹了vue中的計(jì)算屬性傳參，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue計(jì)算屬性傳參

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

針對(duì)這個(gè)問題

我們來看看下面的示例

<template>
?? ?<p>{{ getCallerName }}</p>
?</template>
<script>
export default {
?? ?props: {
?? ??? ?callRecord: {
?? ??? ??? ?type: Object,
? ? ? ? ? ? default: () => ({}),
? ? ? ? }
?? ?},
?? ?computed:{
?? ??? ?// 獲取名稱
? ? ? ? getCallerName() {
? ? ? ? ?? ?return 'callerName'
? ? ? ? },
?? ?}
}

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

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

因?yàn)橛?jì)算屬性具有緩存效果，所以我們期望用計(jì)算屬性去獲?。ó?dāng)然，過濾器也能使用，方法有很多，這里不用較真）

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

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

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

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

<template>
?? ?<p>{{ getCallerName(callRecord) }}</p>
?</template>
<script>
export default {
?? ?props: {
?? ??? ?callRecord: {
?? ??? ??? ?type: Object,
? ? ? ? ? ? default: () => ({}),
? ? ? ? }
?? ?},
?? ?computed:{
?? ??? ?// 獲取名稱
? ? ? ? getCallerName() {
? ? ? ? ?? ?return callRecord => {
? ? ? ? ? ? ? ? if (callRecord.type === 1 || callRecord.type === 2) return callRecord.callerName;
? ? ? ? ? ? ? ? return callerInfo.callerNumber;
? ? ? ? ? ? };
? ? ? ? },
?? ?}
}

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

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

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

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

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

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

2、采用計(jì)算屬性。

<template v-for="(item,index) in languageAddDataArray" >
<el-form-item :label=getLanguageType(item.languageType) >
? ? <el-input v-model="item.content" ?auto-complete="off" size="mini"> </el-input>
</el-form-item>
?</template>
<script>
? ? ? ? ? ?export default {
? ? ? ? ?data () {
? ?languageAddDataArray:[],
? ? ? ? ?},
? ? ? ? computed:{
? getLanguageType(){
? ? ? ? return function (type) {
? ?return type==1?'中文':'英文';
? ? ? ? }
? ?}
? ? ? ?}
? ? ? ? ? ?}
</script>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: