vue在html标签{{}}中调用函数的方法总结及对比

目录
  • 一、问题
    • 1)实现上述需求:有两种方式
    • 2)两种实现方式对比:
  • 二、解决方法(在html渲染时调用函数)
    • 1.定义处理函数
    • 2.引入处理函数,在data中定义函数,在html中使用
    • 3.效果
    • 4.优化
  • 三、总结

一、问题

1.在html中对数据中的某一个标签是根据标签的类型书写的,值写在了{{}}中,希望显示的时候对值做某种细节处理。

例如:我的需求:后端返回姓名、年龄、出生日期、学历等组成的一个数组,出生日期要保存为带有时分秒的,但是显示时不需要时分秒。

1)实现上述需求:有两种方式

a.方式一:

直接在接口调用收到数据时判断数据类型,并对数据进行处理。

b.方式二:

在显示的时候再调用函数处理数据(html标签的{{}}中处理)

2)两种实现方式对比:

前提:由于有些要用输入框、有些要用下拉框,有些又要用日期选择框;我使用v-for渲染时就根据不同的控件类型分别渲染。

a.如果使用方式一就会二次对是否是出生日期的判断(第一次接收到数据去除时分秒要判断,第二次html渲染的时候判断);使用方式二则只需要对是否是出生日期进行一次判断(只在html渲染的时候判断)——方式二能减少 if-else书写的次数

b.如果数据还需要原样返回给后端,那么使用方式二显然是perfect,没有修改原数据,只是返回了想要的数据;使用方式一就必须存一个备份数据,如果需要单独处理的数据多了,简直就是一场灾难(保留一堆其实没必要保存的数据)——方式二保留了原始数据,避免了冗余数据

c.如果有很多地方需要进行同样的处理,函数无疑是更好的选择。——一次书写,多处调用,提高了代码的可维护性

所以选择方式二实现需求,怎样在html渲染时调用函数呢?

二、解决方法(在html渲染时调用函数)

1.定义处理函数

//与后端约定返回的数据格式是这样的:'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.优化

补充更新

上面的方法的确可以解决问题,但是更合理的方式是  使用 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>

三、总结

1.我也是今天遇到上面这个需求,突然想到这样做。对比中第二点说的问题:其实之前遇到过类似的问题,有的地方需要对数据处理,有的地方又要保留原始数据,但是还备份了一组数据,现在想想就是给自己制作麻烦,还浪费了空间……

到此这篇关于vue在html标签{{}}中调用函数的方法总结及对比的文章就介绍到这了,更多相关vue在html标签{{}}调用函数内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue在html标签{{}}中调用函数的方法总结及对比

    目录 一.问题 1)实现上述需求:有两种方式 2)两种实现方式对比: 二.解决方法(在html渲染时调用函数) 1.定义处理函数 2.引入处理函数,在data中定义函数,在html中使用 3.效果 4.优化 三.总结 一.问题 1.在html中对数据中的某一个标签是根据标签的类型书写的,值写在了{{}}中,希望显示的时候对值做某种细节处理. 例如:我的需求:后端返回姓名.年龄.出生日期.学历等组成的一个数组,出生日期要保存为带有时分秒的,但是显示时不需要时分秒. 1)实现上述需求:有两种方式 a

  • vue如何在项目中调用腾讯云的滑动验证码

    在项目中使用滑动验证,可以调用腾讯云的组件和接口(付费项目) 导言 首先看看官方的步骤教学: https://cloud.tencent.com/document/product/1110/36839 其中,前端涉及到的是"步骤3:客户端接入",里面介绍了两种接入方法:"快速接入"和"定制接入". 项目是原生HTML 或者 jQuery 开发,那么可以使用"快速接入". 项目使用 vue.react 等框架开发,则需要使用&q

  • javascript中声明函数的方法及调用函数的返回值

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <!--js中声明函数的方法--> <script type="text/javascript"> //因为javascript是弱类型的语言,所以参数不需要加类型.函数的也不需要像c#那样要求所以路径都需要有返回值(这个不像c#语言,而且c#的方法也不需要在方法

  • 浅谈js中调用函数时加不加括号的问题

    其实总结起来如下: 函数只要是要调用它进行执行的,都必须加括号.此时,函数()实际上等于函数的返回值.当然,有些没有返回值,但已经执行了函数体内的行为,这个是根本,就是说,只要加括号的,就代表将会执行函数体代码. 不加括号的,都是把函数名称作为函数的指针,用于传参,此时不是得到函数的结果,因为不会运行函数体代码.它只是传递了函数体所在的地址位置,在需要的时候好找到函数体去执行. 所以一般时候我们都是采用的是无括号的原因.这也是由于括号的二义性,因为括号是"函数调用运算符",相当于在执行

  • php中动态调用函数的方法

    本文实例讲述了php中动态调用函数的方法.分享给大家供大家参考.具体分析如下: php中你可以动态调用函数,分为以下步骤: 1. 定义一个函数 2. 将函数名(字符串)赋值给一个变量 3. 使用变量名代替函数名动态调用函数 详细代码如下所示: <?php function addition ($a, $b){ echo ($a + $b), "\n"; } $result = "addition"; $result (3,6); ?> 希望本文所述对大家

  • Python如何在main中调用函数内的函数方式

    一般在Python中在函数中定义的函数是不能直接调用的,但是如果要用的话怎么办呢? 一般情况下: def a():#第一层函数 def b():#第二层函数 print('打开文件B') b()#第二层中的函数直接调用 结果显示: Traceback (most recent call last): File "C:/Users/rog/Desktop/wenzhang.py", line 4, in <module> b() NameError: name 'b' is

  • vue 清空input标签 中file的值操作

    template中: <input type="file" ref="pathClear" @change="onUpload" name="file" id="file"> methods中: onUpload(){ this.$refs. pathClear.value ='' }, 补充知识:将input file的选择的文件清空的两种解决方案 上传文件时,选择了文件后想清空文件路径,搜索

  • js实现iframe跨页面调用函数的方法

    本文实例讲述了js实现iframe跨页面调用函数的方法.分享给大家供大家参考.具体实现方法如下: 在项目中难免会遇到这样一个问题就是页面引入了IFrame并且需要父页面调用子页面函数或者子页面需要调用父页面函数.比如说:现在有两个页面parent.html和child.html.其中parent.html中含有IFrame并且IFrame指向child.html.现在需要在parent.html/child.html中调用child.html/parent.html的一个js方法. 具体的代码实

  • Go语言中普通函数与方法的区别分析

    本文实例分析了Go语言中普通函数与方法的区别.分享给大家供大家参考.具体分析如下: 1.对于普通函数,接收者为值类型时,不能将指针类型的数据直接传递,反之亦然. 2.对于方法(如struct的方法),接收者为值类型时,可以直接用指针类型的变量调用方法,反过来同样也可以. 以下为简单示例: 复制代码 代码如下: package structTest    //普通函数与方法的区别(在接收者分别为值类型和指针类型的时候)  //Date:2014-4-3 10:00:07    import ( 

  • jQuery操作iframe中js函数的方法小结

    本文实例讲述了jQuery操作iframe中js函数的方法.分享给大家供大家参考,具体如下: 1.jquery操作iframe中的元素(2种方式) var tha = $(window.frames["core_content"].document).find("#trewuuu").html(); var thb = $("#core_content").contents().find("#trewuuu").html();

随机推荐