vue中的数据格式化filters、formatter方式

 更新时间:2024年07月18日 09:57:43   作者:小蒜瓣  
这篇文章主要介绍了vue中的数据格式化filters、formatter方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue数据格式化filters、formatter

一、filters过滤器函数可以使用在两个地方

  • 1.双大括号表达式 {{ 文本字符串 | 过滤函数 }}
  • 2.v-bind:str= "文本字符串 | 过滤函数"

以下实例为四舍五入,以及过滤器串联后11.11

<template>
    <div style="text-align:right;margin-bottom:10px">
        总金额:
        <span class="color-blue font18">¥{{ listAmount | numFilter }}元                </span> 
         <!-- 0.11 -->
        <span class="color-blue font18">¥{{ listAmount | Hundredfold | numFilter }}元                </span> 
         <!-- 11.11 -->
    </div>
</template>
<script>
    export default {
        name: "OpeningList",
        data: function() {
            return {
                listAmount: 0.111119
            }
        }
    },
    filters: {
        Hundredfold(value) {
            return realVal*100;
        },
        numFilter(value) {
            const realVal = parseFloat(value).toFixed(2);
            return realVal;
        }
    },
    mounted: function() {
    }
</script>

二、table :formatter=function

<template>
  <el-table :data="tableData" style="width: 100%" :default-sort = "{prop: 'date', order: 'descending'}" >
    <el-table-column prop="name" label="姓名" s width="180"> </el-table-column>
    <el-table-column prop="address" label="地址"
      :formatter="formatter"> </el-table-column>
    <!-- 地址:上海市普陀区金沙江路 1518 弄 -->
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    methods: {
      formatter(row, column) {
        return '地址:'+row.address;
      }
    }
  }
</script>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 解决vue2中使用axios http请求出现的问题

    解决vue2中使用axios http请求出现的问题

    下面小编就为大家分享一篇解决vue2中使用axios http请求出现的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 快速解决 keep-alive 缓存组件中定时器干扰问题

    快速解决 keep-alive 缓存组件中定时器干扰问题

    文章介绍了在使用keep-alive缓存组件时,如何在组件被缓存后清理定时器以避免干扰其他组件的逻辑,通过在deactivated钩子中清理定时器,可以确保组件被缓存时不会继续运行定时器,感兴趣的朋友一起看看吧
    2025-02-02
  • 详解vue3 defineModel如何实现双向绑定

    详解vue3 defineModel如何实现双向绑定

    随着 Vue 3.3 引入的 defineModel 宏,开发者可以更加简洁地实现组件内部的双向数据绑定,下面就跟随小编一起来学习一下如何使用defineModel实现双向绑定吧
    2024-12-12
  • VUE v-for中的:key详解

    VUE v-for中的:key详解

    这篇文章主要为大家介绍了v-for中的:key,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • vue项目中mock.js的使用及基本用法

    vue项目中mock.js的使用及基本用法

    mockjs是用来模拟产生一些虚拟的数据,可以让前端在后端接口还没有开发出来时独立开发。这篇文章主要介绍了vue项目中mock.js的使用,需要的朋友可以参考下
    2019-05-05
  • vue实现文章点赞和差评功能

    vue实现文章点赞和差评功能

    这篇文章主要为大家详细介绍了vue实现文章点赞和差评功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue3从0搭建Monorepo项目组件库

    Vue3从0搭建Monorepo项目组件库

    这篇文章主要为大家介绍了Vue3从0搭建Monorepo项目组件库示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • vue 子组件修改data或调用操作

    vue 子组件修改data或调用操作

    这篇文章主要介绍了vue 子组件修改data或调用操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue 指令和过滤器的基本使用(品牌管理案例)

    vue 指令和过滤器的基本使用(品牌管理案例)

    这篇文章主要介绍了vue-品牌管理案例-指令和过滤器的相关知识,文中通过代码给大家介绍了过滤器的基本使用,需要的朋友可以参考下
    2019-11-11
  • 关于Vite不能使用require问题的解决方法

    关于Vite不能使用require问题的解决方法

    在vue2中我们通常会在模板中通过三目运算符和require来实现动态图片,下面这篇文章主要给大家介绍了关于Vite不能使用require问题的解决方法,需要的朋友可以参考下
    2022-10-10

最新评论