vue在html标签 {{}} 中调用函数的方法

//与后端约定返回的数据格式是这样的：'2020-04-09 08:30:00' 年月日和时分秒之间用空格分隔
export const formatBorntime=(borntime)=>{
   //处理逻辑
   //******

   //返回处理好的数据
   return borntime.split(" ")[0];
}

2.引入处理函数,在data中定义函数，在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.引入处理出生日期显示的函数
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中定义该方法，否则无法直接使用(报错：html中使用的函数不存在或不是响应式的）

1）在data中定义

data(){
formatDateMethod:formatBorntime,

}

2）在methods中定义

methods: {
formatDateMethod(params1){
return formatBorntime (params1);
}

}

3.效果

4.优化

----------------------2022/11/21更新-------------------------------------------------------------------------------------

上面的方法的确可以解决问题，但是更合理的方式是使用 computed计算属性，computed中写处理逻辑（personInfo变化时，处理 borntime的格式）。

原因：computed可以缓存计算结果,在borntime没有变化时，不会再次调用处理逻辑。而直接写的方法调用，在每次渲染HTML时都会被调用。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.引入处理出生日期显示的函数
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.根据 personInfo.borntime.value 处理 borntime的格式(因为要渲染整个personInfo,所以personInfo一定是变化的,可以正确拿到borntime)
      borntime_deal(){
          return formatBorntime(personInfo.borntime.value).toString()
      }
  }
}
</script>