vue实现金额过滤功能

墨蓝 2023-07-09 02:02 108阅读 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 条评论，108人围观）

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

相关阅读

相关 struts2--实现文字过滤功能

如： ![Center][] 过滤结果： ![Center 1][] 目的是将内容中出现的”北京“替换成"\\" 1、过滤器： pac

Bertha 。/ 2024年02月18日 00:32/ 0 赞/ 31 阅读

相关使用jQuery实现过滤功能

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

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

相关 vue实现金额过滤功能

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

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

相关 vue实现动态修改单价，改变金额

效果展示： ![20191020145637293.gif][] 代码展示：; <body> <div id="app"> <

爱被打了一巴掌/ 2023年06月09日 10:16/ 0 赞/ 17 阅读

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

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

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

相关价格过滤功能的实现

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

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

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

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

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

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

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

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

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

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

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

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

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

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