vue在html標(biāo)簽{{}}中調(diào)用函數(shù)的方法總結(jié)及對(duì)比
一、問題
1.在html中對(duì)數(shù)據(jù)中的某一個(gè)標(biāo)簽是根據(jù)標(biāo)簽的類型書寫的，值寫在了{(lán){}}中，希望顯示的時(shí)候?qū)χ底瞿撤N細(xì)節(jié)處理。
例如：我的需求：后端返回姓名、年齡、出生日期、學(xué)歷等組成的一個(gè)數(shù)組，出生日期要保存為帶有時(shí)分秒的，但是顯示時(shí)不需要時(shí)分秒。
1）實(shí)現(xiàn)上述需求：有兩種方式
a.方式一：
直接在接口調(diào)用收到數(shù)據(jù)時(shí)判斷數(shù)據(jù)類型，并對(duì)數(shù)據(jù)進(jìn)行處理。
b.方式二：
在顯示的時(shí)候再調(diào)用函數(shù)處理數(shù)據(jù)（html標(biāo)簽的{{}}中處理）
2）兩種實(shí)現(xiàn)方式對(duì)比：
前提：由于有些要用輸入框、有些要用下拉框，有些又要用日期選擇框；我使用v-for渲染時(shí)就根據(jù)不同的控件類型分別渲染。
a.如果使用方式一就會(huì)二次對(duì)是否是出生日期的判斷（第一次接收到數(shù)據(jù)去除時(shí)分秒要判斷,第二次html渲染的時(shí)候判斷）；使用方式二則只需要對(duì)是否是出生日期進(jìn)行一次判斷（只在html渲染的時(shí)候判斷）——方式二能減少 if-else書寫的次數(shù)
b.如果數(shù)據(jù)還需要原樣返回給后端，那么使用方式二顯然是perfect，沒有修改原數(shù)據(jù)，只是返回了想要的數(shù)據(jù)；使用方式一就必須存一個(gè)備份數(shù)據(jù)，如果需要單獨(dú)處理的數(shù)據(jù)多了，簡直就是一場(chǎng)災(zāi)難（保留一堆其實(shí)沒必要保存的數(shù)據(jù)）——方式二保留了原始數(shù)據(jù)，避免了冗余數(shù)據(jù)
c.如果有很多地方需要進(jìn)行同樣的處理，函數(shù)無疑是更好的選擇。——一次書寫，多處調(diào)用，提高了代碼的可維護(hù)性
所以選擇方式二實(shí)現(xiàn)需求,怎樣在html渲染時(shí)調(diào)用函數(shù)呢？
二、解決方法（在html渲染時(shí)調(diào)用函數(shù)）
1.定義處理函數(shù)
//與后端約定返回的數(shù)據(jù)格式是這樣的：'2020-04-09 08:30:00' 年月日和時(shí)分秒之間用空格分隔
export const formatBorntime=(borntime)=>{
//處理邏輯
//******
//返回處理好的數(shù)據(jù)
return borntime.split(" ")[0];
}2.引入處理函數(shù),在data中定義函數(shù)，在html中使用
<template>
<div v-for="(item,key) of personInfo">
<template v-if="key === 'borntime'">
<div class="info-title">{{ item.label }}</div>
<span>：</span>
<!-- 3.使用方法formatDateMethod-->
<el-tooltip
effect="dark"
:content="formatDateMethod(new Date(item.value))).toString()"
placement="top"
>
<!-- 3.使用方法formatDateMethod-->
<div class="info-content">
{{
formatDateMethod(new Date(item.value)).toString()
}}
</div>
</el-tooltip>
</template>
<template v-else>
<div class="info-title">{{ item.label }}</div>
<span>：</span>
<el-tooltip
effect="dark"
:content="item.value.toString()"
placement="top"
>
<div class="info-content">
{{ item.value }}
</div>
</el-tooltip>
</template>
</div>
</template>
<script>
//1.引入處理出生日期顯示的函數(shù)
import { formatBorntime } from "@/utils/common";
export default{
data(){
//2.在data中定義方法
formatDateMethod:formatBorntime,
personInfo: {
patientname: {
label: "姓名",
value: "",
},
patientage: {
label: "年齡",
value: "",
},
borntime: {
label: "出生日期",
value: "2022-04-06 00:00:00",
},
height: {
label: "身高(cm)",
value: "",
},
},
}
}
</script>注：必須在data中定義 或者 methods中定義該方法，否則無法直接使用(報(bào)錯(cuò)：html中使用的函數(shù)不存在或不是響應(yīng)式的）
1）在data中定義
? data(){
? ? formatDateMethod:formatBorntime,
}2）在methods中定義
? methods: {
? ? formatDateMethod(params1){
? ? ? return formatBorntime?(params1);
? ? }
? }3.效果
4.優(yōu)化
補(bǔ)充更新
上面的方法的確可以解決問題，但是更合理的方式是 使用 computed計(jì)算屬性，computed中寫處理邏輯（personInfo變化時(shí)，處理 borntime的格式）。
原因：computed可以緩存計(jì)算結(jié)果,在borntime沒有變化時(shí)，不會(huì)再次調(diào)用處理邏輯。而直接寫的方法調(diào)用，在每次渲染HTML時(shí)都會(huì)被調(diào)用。computed 性能更好一些。
<template>
<div v-for="(item,key) of personInfo">
<template v-if="key === 'borntime'">
<div class="info-title">{{ item.label }}</div>
<span>：</span>
<!-- 3.使用computed屬性 borntime_deal -->
<el-tooltip
effect="dark"
:content="borntime_deal"
placement="top"
>
<!-- 3.使用computed屬性 borntime_deal-->
<div class="info-content">
{{
borntime_deal
}}
</div>
</el-tooltip>
</template>
<template v-else>
<div class="info-title">{{ item.label }}</div>
<span>：</span>
<el-tooltip
effect="dark"
:content="item.value.toString()"
placement="top"
>
<div class="info-content">
{{ item.value }}
</div>
</el-tooltip>
</template>
</div>
</template>
<script>
//1.引入處理出生日期顯示的函數(shù)
import { formatBorntime } from "@/utils/common";
export default{
data(){
personInfo: {
patientname: {
label: "姓名",
value: "",
},
patientage: {
label: "年齡",
value: "",
},
borntime: {
label: "出生日期",
value: "2022-04-06 00:00:00",
},
height: {
label: "身高(cm)",
value: "",
},
},
},
computed:{
// 2.根據(jù) personInfo.borntime.value 處理 borntime的格式(因?yàn)橐秩菊麄€(gè)personInfo,所以personInfo一定是變化的,可以正確拿到borntime)
borntime_deal(){
return formatBorntime(personInfo.borntime.value).toString()
}
}
}
</script>三、總結(jié)
1.我也是今天遇到上面這個(gè)需求，突然想到這樣做。對(duì)比中第二點(diǎn)說的問題：其實(shí)之前遇到過類似的問題，有的地方需要對(duì)數(shù)據(jù)處理，有的地方又要保留原始數(shù)據(jù)，但是還備份了一組數(shù)據(jù)，現(xiàn)在想想就是給自己制作麻煩，還浪費(fèi)了空間……
到此這篇關(guān)于vue在html標(biāo)簽{{}}中調(diào)用函數(shù)的方法總結(jié)及對(duì)比的文章就介紹到這了,更多相關(guān)vue在html標(biāo)簽{{}}調(diào)用函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
淺談webpack SplitChunksPlugin實(shí)用指南
這篇文章主要介紹了淺談webpack SplitChunksPlugin實(shí)用指南，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
vue3中reactive和ref的實(shí)現(xiàn)與區(qū)別詳解
reactive和ref都是vue3實(shí)現(xiàn)響應(yīng)式系統(tǒng)的api,他們是如何實(shí)現(xiàn)響應(yīng)式的呢,reactive和ref又有什么區(qū)別呢,下面小編就來和大家詳細(xì)講講,希望對(duì)大家有所幫助2023-10-10
最近做項(xiàng)目遇到這樣的需求,需要上傳的文件格式必須是pdf格式,方便我們查看,本文給大家分享element上傳文件對(duì)格式限制的處理方案,感興趣的朋友一起看看吧2024-02-02
解決運(yùn)行vue項(xiàng)目內(nèi)存溢出問題
這篇文章主要介紹了解決運(yùn)行vue項(xiàng)目內(nèi)存溢出問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
父子組件之間的通信就是props down,events up,父組件通過屬性props向下傳遞數(shù)據(jù)給子組件,子組件通過事件events 給父組件發(fā)送消息,這篇文章主要給大家介紹了關(guān)于vue中組件的props屬性的相關(guān)資料,需要的朋友可以參考下2021-11-11
vue+elemen實(shí)現(xiàn)el-tooltip在文本超出區(qū)域后浮現(xiàn)
el-tooltip組件本身就是懸浮提示功能,在對(duì)它進(jìn)行二次封裝時(shí),實(shí)現(xiàn)超出的文本浮現(xiàn),本文就來介紹一下vue+elemen實(shí)現(xiàn)el-tooltip在文本超出區(qū)域后浮現(xiàn),感興趣的可以了解一下2023-12-12
這篇文章主要介紹了Vue的自定義事件之組件通信工具詳解,Vue的自定義事件(Custom Events)是一種強(qiáng)大的工具,用于實(shí)現(xiàn)組件之間的通信和數(shù)據(jù)傳遞,本文將深入探討什么是Vue的自定義事件,以及如何自定義和使用它們,需要的朋友可以參考下2023-10-10
vue.js項(xiàng)目使用原生js實(shí)現(xiàn)移動(dòng)端的輪播圖
這篇文章主要為大家介紹了vue.js項(xiàng)目中使用原生js實(shí)現(xiàn)移動(dòng)端的輪播圖，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04
vue 實(shí)現(xiàn)搜索的結(jié)果頁面支持全選與取消全選功能
這篇文章主要介紹了vue 實(shí)現(xiàn)搜索的結(jié)果頁面支持全選與取消全選功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
Vue動(dòng)態(tài)加載圖片在跨域時(shí)無法顯示的問題及解決方法
這篇文章主要介紹了解決VUE動(dòng)態(tài)加載圖片在跨域時(shí)無法顯示的問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-03