参考: https://www.cnblogs.com/liujn0829/p/8622960.html
https://blog.csdn.net/z8735058/article/details/76824548

一、单个过滤器

参考 https://cn.vuejs.org/v2/guide/filters.html

二、多个过滤器

    1. 新建dfilter.js文件

      //可重用方法  过滤器
      const dfilters = {
      addZeroTwo: function(value) {
      if (value > 0 && value < 0.1) {
      return value;
      }
      var value = Math.round(parseFloat(value) * 100) / 100; //一定要用var声明,let会报错
      var arr = value.toString().split('.'); if (arr.length === 1) { //个位数
      return value.toString() + '.00';
      } else {
      if (arr[1].length === 1) { //只有一位小数
      return value.toString() + '0';
      } else {
      return value;
      }
      }
      }, addZeroOne: function(value) {
      if (value > 0 && value < 0.1) {
      return value;
      }
      var value = Math.round(parseFloat(value) * 100) / 100;
      var arr = value.toString().split('.'); if (arr.length === 1) {
      return value.toString() + '.0';
      } else {
      if (arr[1].length === 1) {
      return value.toString() + '0';
      } else {
      return value;
      }
      }
      }
      }
      export default dfilters;
    2. 在main.js中引入并注册(在new Vue前注册)
      import dfilters from '../static/js/dfilters';
      
      for (let key in dfilters) {
      Vue.filter(key, dfilters[key]);
      }
    3. 在组件中使用
      <span>原价:¥{{price|addZeroTwo}}</span>

vue 全局过滤器(单个和多个过滤器)的更多相关文章

  1. 开发vue全局插件的4种方式

    定义全局插件的步骤 定义全局插件 pluginsUtil.js Vue.js 的插件应当有一个公开方法 install .这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象: ex ...

  2. vue全局配置----小白基础篇

    今天学习vue全局配置.希望帮助我们去了解vue的全局配置,快速开发. Vue.config是vue的全局配置对象.包含Vue的所有全局属性: silent:boolean(默认值:false)--- ...

  3. vue全局使用axios插件请求ajax

    vue全局使用axios插件请求ajax Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方宣布停止更新vue-resource,并推 ...

  4. Vue全局异常捕获

    之前没注意过这么个小技巧 , 可能在Vue文档里也有  暂时先记下了 方便摘要 Vue全局配置 errorHandler可以进行全局错误收集,我们可以根据这个特性对前端异常做这样的处理:业务错误直接写 ...

  5. vue全局注册与局部注册的写法

    vue全局注册是每个实例化的vue都可以使用,而局部则是实例化注册的那个可以用.举个例子,看看写法: <div id="app"> <p>页面载入时,inp ...

  6. 自定义vue全局组件use使用、vuex的使用

    自定义vue全局组件use使用(解释vue.use()的原理)我们在前面学习到是用别人的组件:Vue.use(VueRouter).Vue.use(Mint)等等.其实使用的这些都是全剧组件,这里我们 ...

  7. Vue全局组件注册

    通过Vue.component(‘组件名’, {配置对象})注册全局组件 在main.js中注册全局组件 test import Vue from 'vue' import App from './A ...

  8. 详解vue全局组件与局部组件使用方法

    这篇文章主要为大家详细介绍了vue全局组件与局部组件的使用方法,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. vue全局/局部注册,以及一些混淆的组件main.js ...

  9. vue全局错误捕获

    1.errorHandler Vue全局配置 errorHandler可以进行全局错误收集,捕获全局错误抛出,避免前端页面挂掉   export default function errorHandl ...

  10. Vue全局弹窗:一次注册,全局可弹

    Vue全局弹窗 今天来搞一个全局弹窗,不用每个文件都引入,只在main.js里作为全局原型引入就好了 先新建弹窗组件 toast.vue <template></template&g ...

随机推荐

  1. python2x 安装 psutil

    安装psutil模块: wget https://pypi.python.org/packages/source/p/psutil/psutil-2.0.0.tar.gz --no-check-cer ...

  2. du和df

    du,disk usage,是通过搜索文件来计算每个文件的大小然后累加,du能看到的文件只是一些当前存在 的,没有被删除的.(-s:summarize 仅显示总计,只列出最后加总的值) df,disk ...

  3. Linux sed -i 字符串替换

    sed -i 直接替换文件中的内容不输出, 如 将 laravel .env中的 QUEUE_DRIVER=sync 替换为 QUEUE_DRIVER=redis, 在Laravel的项目根目录中运行 ...

  4. 7.ICMP与ping

    ping是基于ICMP(Internet Control Message Protocol)协议工作的   ICMP报文封装在IP包里,作为“侦察兵”,非常轻巧. ICMP报文的类型有很多,最常用的是 ...

  5. 十二. for of 示例 (可以解决大多数应用场景)

    for of entries() 可以同时拿到数组的索引跟值 因此可以使用解构的语法: for of 示例 1. 求和 2.字符串

  6. day15 python-03 列表,元组,字典

    Python之路,Day3 = Python基础3 注: extend: 拼接 enumerate:打印序号,返回两个值 模块的简单使用 sys模块 #!/usr/bin/env python #这句 ...

  7. jq+baiduTemplate城市选择

    根据输入内容,动态匹配全国城市,如下图: 文件下载地址:chooseCity

  8. 如何清除本机DNS缓存

    如何清除本机DNS缓存 在实际应用过程中可能会遇到DNS解析错误的问题,就是说当我们访问一个域名时无法完成将其 解析到IP地址的工作,而直接输入网站IP却可以正常访问,这就是因为DNS解析出现故障造成 ...

  9. 一篇关于Matcher find方法深刻理解的文章

    文章目录 知识点 find find(int var1) reset group(int var1) 源码 故事是这样的 探索 问题解决 方法一: 方法二: 方法三: 总结 知识点 find 首先fi ...

  10. Python对接支付宝支付自实现

    Python对接支付宝支付自实现 # -*- coding: utf-8 -*- import base64 import json import urllib.parse from datetime ...