欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue在html標(biāo)簽{{}}中調(diào)用函數(shù)的方法總結(jié)及對比

 更新時間:2023年03月29日 10:07:23   作者:琹箐  
這篇文章主要給大家介紹了關(guān)于vue在html標(biāo)簽{{}}中調(diào)用函數(shù)的方法總結(jié)及對比,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

一、問題

1.在html中對數(shù)據(jù)中的某一個標(biāo)簽是根據(jù)標(biāo)簽的類型書寫的,值寫在了{(lán){}}中,希望顯示的時候?qū)χ底瞿撤N細(xì)節(jié)處理。

例如:我的需求:后端返回姓名、年齡、出生日期、學(xué)歷等組成的一個數(shù)組,出生日期要保存為帶有時分秒的,但是顯示時不需要時分秒。

1)實(shí)現(xiàn)上述需求:有兩種方式

a.方式一:

直接在接口調(diào)用收到數(shù)據(jù)時判斷數(shù)據(jù)類型,并對數(shù)據(jù)進(jìn)行處理。

b.方式二:

在顯示的時候再調(diào)用函數(shù)處理數(shù)據(jù)(html標(biāo)簽的{{}}中處理)

2)兩種實(shí)現(xiàn)方式對比:

前提:由于有些要用輸入框、有些要用下拉框,有些又要用日期選擇框;我使用v-for渲染時就根據(jù)不同的控件類型分別渲染。

a.如果使用方式一就會二次對是否是出生日期的判斷(第一次接收到數(shù)據(jù)去除時分秒要判斷,第二次html渲染的時候判斷);使用方式二則只需要對是否是出生日期進(jìn)行一次判斷(只在html渲染的時候判斷)——方式二能減少 if-else書寫的次數(shù)

b.如果數(shù)據(jù)還需要原樣返回給后端,那么使用方式二顯然是perfect,沒有修改原數(shù)據(jù),只是返回了想要的數(shù)據(jù);使用方式一就必須存一個備份數(shù)據(jù),如果需要單獨(dú)處理的數(shù)據(jù)多了,簡直就是一場災(zāi)難(保留一堆其實(shí)沒必要保存的數(shù)據(jù))——方式二保留了原始數(shù)據(jù),避免了冗余數(shù)據(jù)

c.如果有很多地方需要進(jìn)行同樣的處理,函數(shù)無疑是更好的選擇。——一次書寫,多處調(diào)用,提高了代碼的可維護(hù)性

所以選擇方式二實(shí)現(xiàn)需求,怎樣在html渲染時調(diào)用函數(shù)呢?

二、解決方法(在html渲染時調(diào)用函數(shù))

1.定義處理函數(shù)

//與后端約定返回的數(shù)據(jù)格式是這樣的:'2020-04-09 08:30:00' 年月日和時分秒之間用空格分隔
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)錯: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變化時,處理 borntime的格式)。

原因:computed可以緩存計(jì)算結(jié)果,在borntime沒有變化時,不會再次調(diào)用處理邏輯。而直接寫的方法調(diào)用,在每次渲染HTML時都會被調(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)橐秩菊麄€personInfo,所以personInfo一定是變化的,可以正確拿到borntime)
      borntime_deal(){
          return formatBorntime(personInfo.borntime.value).toString()
      }
  }
}
</script>

 三、總結(jié)

1.我也是今天遇到上面這個需求,突然想到這樣做。對比中第二點(diǎn)說的問題:其實(shí)之前遇到過類似的問題,有的地方需要對數(shù)據(jù)處理,有的地方又要保留原始數(shù)據(jù),但是還備份了一組數(shù)據(jù),現(xiàn)在想想就是給自己制作麻煩,還浪費(fèi)了空間……

到此這篇關(guān)于vue在html標(biāo)簽{{}}中調(diào)用函數(shù)的方法總結(jié)及對比的文章就介紹到這了,更多相關(guān)vue在html標(biāo)簽{{}}調(diào)用函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 淺談webpack SplitChunksPlugin實(shí)用指南

    淺談webpack SplitChunksPlugin實(shí)用指南

    這篇文章主要介紹了淺談webpack SplitChunksPlugin實(shí)用指南,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • vue3中reactive和ref的實(shí)現(xiàn)與區(qū)別詳解

    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ì)講講,希望對大家有所幫助
    2023-10-10
  • element上傳文件對格式限制的處理方案

    element上傳文件對格式限制的處理方案

    最近做項(xiàng)目遇到這樣的需求,需要上傳的文件格式必須是pdf格式,方便我們查看,本文給大家分享element上傳文件對格式限制的處理方案,感興趣的朋友一起看看吧
    2024-02-02
  • 解決運(yùn)行vue項(xiàng)目內(nèi)存溢出問題

    解決運(yùn)行vue項(xiàng)目內(nèi)存溢出問題

    這篇文章主要介紹了解決運(yùn)行vue項(xiàng)目內(nèi)存溢出問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • 詳細(xì)聊聊vue中組件的props屬性

    詳細(xì)聊聊vue中組件的props屬性

    父子組件之間的通信就是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)

    vue+elemen實(shí)現(xiàn)el-tooltip在文本超出區(qū)域后浮現(xiàn)

    el-tooltip組件本身就是懸浮提示功能,在對它進(jìn)行二次封裝時,實(shí)現(xiàn)超出的文本浮現(xiàn),本文就來介紹一下vue+elemen實(shí)現(xiàn)el-tooltip在文本超出區(qū)域后浮現(xiàn),感興趣的可以了解一下
    2023-12-12
  • Vue的自定義事件之組件通信工具詳解

    Vue的自定義事件之組件通信工具詳解

    這篇文章主要介紹了Vue的自定義事件之組件通信工具詳解,Vue的自定義事件(Custom Events)是一種強(qiáng)大的工具,用于實(shí)現(xiàn)組件之間的通信和數(shù)據(jù)傳遞,本文將深入探討什么是Vue的自定義事件,以及如何自定義和使用它們,需要的朋友可以參考下
    2023-10-10
  • vue.js項(xiàng)目使用原生js實(shí)現(xiàn)移動端的輪播圖

    vue.js項(xiàng)目使用原生js實(shí)現(xiàn)移動端的輪播圖

    這篇文章主要為大家介紹了vue.js項(xiàng)目中使用原生js實(shí)現(xiàn)移動端的輪播圖,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-04-04
  • vue 實(shí)現(xiàn)搜索的結(jié)果頁面支持全選與取消全選功能

    vue 實(shí)現(xiàn)搜索的結(jié)果頁面支持全選與取消全選功能

    這篇文章主要介紹了vue 實(shí)現(xiàn)搜索的結(jié)果頁面支持全選與取消全選功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-05-05
  • Vue動態(tài)加載圖片在跨域時無法顯示的問題及解決方法

    Vue動態(tài)加載圖片在跨域時無法顯示的問題及解決方法

    這篇文章主要介紹了解決VUE動態(tài)加載圖片在跨域時無法顯示的問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-03-03

最新評論