vue实现金额过滤功能

墨蓝 2023-07-09 02:02 21阅读 0赞

## [vue过滤器][vue] ##

const digitsRE = /(\d{3})(?=\d)/g
    
    export function currency (value, currency, decimals) { 
      value = parseFloat(value)
      if (!isFinite(value) || (!value && value !== 0)) return ''
      currency = currency != null ? currency : '$'
      decimals = decimals != null ? decimals : 2
      var stringified = Math.abs(value).toFixed(decimals)
      var _int = decimals
        ? stringified.slice(0, -1 - decimals)
        : stringified
      var i = _int.length % 3
      var head = i > 0
        ? (_int.slice(0, i) + (_int.length > 3 ? ',' : ''))
        : ''
      var _float = decimals
        ? stringified.slice(-1 - decimals)
        : ''
      var sign = value < 0 ? '-' : ''
      return sign + currency + head +
        _int.slice(i).replace(digitsRE, '$1,') +
        _float
    }

#### 局部注册 ####

div class="item-total">
      Item total: 
      <span class="total-price">{ { totalPrice | currency('$')}}</span>
    </div>

import {  currency } from '../util/currency'
    export default{ 
      // 过滤器
      // 这里面可以定义很多个过滤器
      filters: { 
        currency: currency
      },
    }

#### 全局注册 ####

###### main.js ######

import {  currency } from './util/currency'
    
    Vue.filter('currency', currency)

###### 在自己想要用的组件直接就使用 ######

[vue]: https://cn.vuejs.org/v2/guide/filters.html

发表评论取消回复

表情：

评论列表（有 0 条评论，21人围观）

还没有评论，来说两句吧...

相关阅读

相关使用jQuery实现过滤功能

在Web开发中，过滤功能是一个常见的需求，它允许用户根据特定条件筛选和显示数据。jQuery是一个流行的JavaScript库，它提供了简化DOM操作的功能，使得实现过滤功能变

分手后的思念是犯贱/ 2023年10月16日 16:46/ 0 赞/ 42 阅读

相关 vue实现金额过滤功能

[vue过滤器][vue] const digitsRE = /(\d{3})(?=\d)/g export function currency

墨蓝/ 2023年07月09日 02:02/ 0 赞/ 22 阅读

相关页面即时更新金额功能的实现

一．Jsp页面设置：在car.jsp页面上定义function changeNum(id,obj)函数，里面传入链接到ChangeCarServlet来实现页面及时刷新的效

迈不过友情╰/ 2022年10月01日 00:53/ 0 赞/ 185 阅读

相关 MySQL5.5实现复制过滤功能

基于已经实现的`mysql 5.5`主从复制架构来实现复置过滤功能查看几个相关的变量 `binlog-do-db`:表示`master`仅仅将指定数据库的相

快来打我*/ 2022年05月25日 14:35/ 0 赞/ 264 阅读

相关价格过滤功能的实现

一、价格过滤功能 GoodsList.vue 1. >>点击价格区间时发送请求 2. methods:\{ 3. getGoodsList(flag)\{

曾经终败给现在/ 2022年05月11日 13:22/ 0 赞/ 223 阅读

相关【VUE】金额格式化工具

currency.js const digitsRE = /(\d{3})(?=\d)/g export function currency (v

傷城~/ 2022年04月02日 11:14/ 0 赞/ 388 阅读

相关 Vue+iview---计算总金额功能的实现

背景订餐系统前端使用的是vue框架，基于iview组件，因为是订单系统，计算总金额是一个不可缺少的功能。方法介绍 1.显示效果总金额是由表格

╰+攻爆jí腚メ/ 2022年03月06日 11:18/ 0 赞/ 540 阅读

相关 vue实现搜索功能

> 前言：最近小编也是刚跳槽新的公司一个月，前端技术栈是vue+element也是市面上比较常用的框架之一了，同时也花费一点时间总结一下最近的坑，react转vue的一个过程确

Love The Way You Lie/ 2022年01月22日 06:01/ 0 赞/ 443 阅读

相关 VUE 自定义表头实现table的过滤功能

> html代码下面是table <el-table-column v-for="(data,index) in mydata"

女爷i/ 2021年09月27日 16:04/ 0 赞/ 1233 阅读

相关 vue element ui table 过滤功能实现

Element UI代码 <template> <div> <el-table :data="tableData"

水深无声/ 2021年09月27日 15:38/ 0 赞/ 923 阅读