vue計(jì)算屬性想要傳入?yún)?shù)如何解決
vue計(jì)算屬性想要傳入?yún)?shù)怎么辦
先講解決方案
可以通過return 一個(gè)function來實(shí)現(xiàn)，在function中傳入想要傳給computed屬性的參數(shù)
<q-icon :name="getIcon(item.icon,index+1)" style="font-size:2em" @click="btnClicked(index+1)"/>
computed:{
getIcon: function(){
return function(iconName, tabIndex){
return `${this.tabNum===tabIndex ? '' : 'o_'}${iconName}`;
}
},
...mapState({
showSearchFriendDialog: 'showSearchFriendDialog',
showChangeAvatarDialog: 'showChangeAvatarDialog',
showCreateGroupDialog: 'showCreateGroupDialog',
user: 'user'
})
},再講一下我遇到的問題
vue的v-bind屬性傳入一個(gè)computed函數(shù)，當(dāng)該函數(shù)帶有參數(shù)的時(shí)候， 瀏覽器報(bào)錯(cuò)，當(dāng)不帶有參數(shù)的時(shí)候正常執(zhí)行
下面這樣解決
vue計(jì)算屬性computed使用注意事項(xiàng)(有緩存)
當(dāng)我們?cè)谀０逯衼盹@示一份經(jīng)過對(duì)數(shù)據(jù)項(xiàng)進(jìn)行復(fù)雜計(jì)算之后的結(jié)果時(shí)，我們有兩種解決方案：
(1) 計(jì)算屬性
(2) 函數(shù)
應(yīng)該如何選擇？
(1)methods定義函數(shù)，如果在模板中使用，每使用一次，就相當(dāng)于調(diào)用了一次，處理邏輯會(huì)重新執(zhí)行。
(2)computed定義計(jì)算屬性，如果在模板中使用，使用多次，但是如果依賴的數(shù)據(jù)不發(fā)生改變，計(jì)算屬性對(duì)應(yīng)的函數(shù)不會(huì)重新執(zhí)行。
(3)計(jì)算屬性會(huì)做緩存，提高渲染的性能。
結(jié)論：
計(jì)算屬性有緩存，提高渲染性能。
如果在頁面上需要用到 對(duì)現(xiàn)有的數(shù)據(jù)進(jìn)行加工得到新數(shù)據(jù)，則時(shí)要使用計(jì)算屬性
想要給計(jì)算屬性賦值, 則需要使用set方法
注意事項(xiàng)：計(jì)算屬性和data一樣,都需要設(shè)置return,當(dāng)沒有輸出結(jié)果時(shí),需要排查是不是return漏掉了
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3的介紹和兩種創(chuàng)建方式詳解(cli和vite)
這篇文章主要介紹了vue3的介紹和兩種創(chuàng)建方式(cli和vite),vue3對(duì)比vue2帶來的性能提升有很多優(yōu)勢(shì)，總體來說Vue 3在性能、開發(fā)體驗(yàn)和代碼組織方面都有所改進(jìn)，使得它更加適合于大型、復(fù)雜的應(yīng)用程序開發(fā)，需要的朋友可以參考下2023-04-04
項(xiàng)目中如何使用axios過濾多次重復(fù)請(qǐng)求詳解
在項(xiàng)目開發(fā)中經(jīng)常需要處理重復(fù)點(diǎn)擊導(dǎo)致多次調(diào)用接口的問題,這篇文章主要介紹了項(xiàng)目中如何使用axios過濾多次重復(fù)請(qǐng)求的相關(guān)資料,需要的朋友可以參考下2021-07-07
vue中動(dòng)態(tài)select的使用方法示例
這篇文章主要介紹了vue中動(dòng)態(tài)select的使用方法,結(jié)合實(shí)例形式分析了vue.js使用動(dòng)態(tài)select創(chuàng)建下拉菜單相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2019-10-10
本篇文章通過實(shí)例給大家分享了vue自動(dòng)化表單的操作方法以及相關(guān)的代碼做了描述，有興趣的朋友可以跟著學(xué)習(xí)下。2018-05-05
vue里的axios如何獲取本地json數(shù)據(jù)
這篇文章主要介紹了vue里的axios如何獲取本地json數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
詳解如何使用Vue-PDF在應(yīng)用中嵌入PDF文檔
在現(xiàn)代Web應(yīng)用中，PDF文檔的使用非常普遍，因?yàn)樗梢栽诟鞣N設(shè)備和操作系統(tǒng)上保持一致的外觀和格式，本文我們就來探討一下如何在Vue.js應(yīng)用中使用vue-pdf庫嵌入PDF文檔吧2023-08-08
基于vue cli 通過命令行傳參實(shí)現(xiàn)多環(huán)境配置
這篇文章主要介紹了vue項(xiàng)目通過命令行傳參實(shí)現(xiàn)多環(huán)境配置(基于@vue/cli)的相關(guān)資料,需要的朋友可以參考下2018-07-07
Vue3中Vuex狀態(tài)管理學(xué)習(xí)實(shí)戰(zhàn)示例詳解
這篇文章主要為大家介紹了Vue3中Vuex狀態(tài)管理學(xué)習(xí)實(shí)戰(zhàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
這篇文章主要介紹了vue2.0 常用的 UI 庫實(shí)例講解，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2017-12-12
Laravel 如何在blade文件中使用Vue組件的示例代碼
這篇文章主要介紹了Laravel 如何在blade文件中使用Vue組件,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06