vue中的計算屬性傳參
vue計算屬性傳參
最近很多小伙伴問到，計算屬性怎么做到像普通函數(shù)一樣傳參呢？
針對這個問題
我們來看看下面的示例
<template>
?? ?<p>{{ getCallerName }}</p>
?</template>
<script>
export default {
?? ?props: {
?? ??? ?callRecord: {
?? ??? ??? ?type: Object,
? ? ? ? ? ? default: () => ({}),
? ? ? ? }
?? ?},
?? ?computed:{
?? ??? ?// 獲取名稱
? ? ? ? getCallerName() {
? ? ? ? ?? ?return 'callerName'
? ? ? ? },
?? ?}
}這個示例，我們接收一個從父組件傳過來的屬性值 callRecord，對象類型
需求：我們需要根據(jù)接收值中的type字段，去判斷應該解析名稱為“主叫名稱”還是“被叫名稱”
因為計算屬性具有緩存效果，所以我們期望用計算屬性去獲?。ó斎?，過濾器也能使用，方法有很多，這里不用較真）
所以，這里我們就要想辦法把我們的值當做參數(shù)傳進去。
官網(wǎng)并沒解釋計算屬性應該怎么傳值，但是呢，計算屬性都會返回一個值，基于這個條件，我們就想到了另一個只知識點 閉包
閉包：閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)，簡單點說，就是嵌套函數(shù)（關于閉包的解釋和使用，大家可以查閱相關資料，這里就不過多贅述了）
有了思路，我們就開始試試看
<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;
? ? ? ? ? ? };
? ? ? ? },
?? ?}
}觀察兩段代碼可以看出，我們在計算屬性里return了一個函數(shù)，這個函數(shù)的參數(shù)即我們傳入的值，而內(nèi)部也能直接拿到并使用這個值，這樣就做到了計算屬性傳參（當然，多個參數(shù)也是可行的）
好了，以上就是對計算屬性如何傳參的介紹使用
vue計算屬性傳參,根據(jù)值不同,渲染相應的內(nèi)容
業(yè)務描述
在開發(fā)項目過程中，后臺傳過來一個數(shù)組，根據(jù)類型顯示相應內(nèi)容。
1、可以直接在渲染出用三目表達式選擇渲染內(nèi)容?？煽蛇x擇的條件多了，就不適用了，也不利于擴展。
2、采用計算屬性。
<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>以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
雖然計算屬性在大多數(shù)情況下更合適,但有時也需要一個自定義的偵聽器,這就是為什么Vue通過watch選項提供了一個更通用的方法,來響應數(shù)據(jù)的變化,這篇文章主要給大家介紹了關于vue3.0中watch偵聽器的相關資料,需要的朋友可以參考下2021-10-10
Django Vue實現(xiàn)動態(tài)菜單和動態(tài)權(quán)限
本文主要介紹了Django Vue實現(xiàn)動態(tài)菜單和動態(tài)權(quán)限，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
Vue+Element ui 根據(jù)后臺返回數(shù)據(jù)設置動態(tài)表頭操作
這篇文章主要介紹了Vue+Element ui 根據(jù)后臺返回數(shù)據(jù)設置動態(tài)表頭操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue中ElementUI結(jié)合transform使用時彈框定位不準確問題解析
在近期開發(fā)中,需要將1920*1080放到更大像素大屏上演示,所以需要使用到transform來對頁面進行縮放,但是此時發(fā)現(xiàn)彈框定位出錯問題,無法準備定位到實際位置,本文給大家分享Vue中ElementUI結(jié)合transform使用時彈框定位不準確解決方法,感興趣的朋友一起看看吧2024-01-01
這篇文章主要介紹了vue的table表格組件的封裝方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了Vue?+?Element?自定義上傳封面組件，本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-01-01
vue+elementUI實現(xiàn)動態(tài)面包屑
這篇文章主要為大家詳細介紹了vue+elementUI實現(xiàn)動態(tài)面包屑，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
uniapp實現(xiàn)紅包動畫效果代碼實例(vue3)
uniapp作為一種基于Vue.js的前端框架,實現(xiàn)了一套代碼多端運行的理念,成為了眾多開發(fā)者的首選,下面這篇文章主要給大家介紹了關于uniapp實現(xiàn)紅包動畫效果的相關資料,需要的朋友可以參考下2024-01-01
前端頁面自適應有很多方法可以實現(xiàn),本文小編將為大家詳細介紹四種常用的方法,并提供相應的代碼示例,感興趣的小伙伴可以跟隨小編一起學習一下2023-10-10
vue.js中proxyTable 轉(zhuǎn)發(fā)請求的實現(xiàn)方法
今天小編就為大家分享一篇vue.js中proxyTable 轉(zhuǎn)發(fā)請求的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09