参考: 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. struts2类型转换2

    如何自定义类型转换器 ? 1). 为什么需要自定义的类型转换器 ? 因为 Struts 不能自动完成 字符串 到 引用类型 的 转换. 2). 如何定义类型转换器: I. 开发类型转换器的类: 扩展 ...

  3. 【学术篇】SPOJ COT 树上主席树

    这是学完主席树去写的第二道题_(:з」∠)_ 之前用树上莫队水过了COT2... 其实COT也可以用树上莫队水过去不过好像复杂度要带个log还是怎么样可能会被卡常数.. 那就orz主席吧.... 写了 ...

  4. [JZOJ4616] 【NOI2016模拟7.12】二进制的世界

    题目 题目大意 给你一个数列,每个数为[0,65535][0,65535][0,65535]内的整数. 给定一个位运算操作optoptopt,是andandand.ororor.xorxorxor中的 ...

  5. 表单 用jquery做输入脱离焦点 进行正则验证

    <!-- 账号登录块 -->       <form class="form1" action="" method="get&quo ...

  6. WordPress 3.8 中文正式版下载 - 建站与学习首选!全球最流行的开源PHP博客网站程序

    转载自:http://www.iplaysoft.com/wordpress.html 话说虽然我一直都在网站底部写着本站基于 WordPress 构建,但时常还是有人问我网站是用什么程序建的,还真有 ...

  7. js 定位到某个锚点的方法

    html页面内可以设置锚点,锚点定义 Html代码  ? 1 <a name="firstAnchor">&nsbp;</a> 锚点使用 Html代 ...

  8. 杂项-IM:IM(即时通讯),一种基于互联网的即时交流消息的业务

    ylbtech-杂项-IM:IM(即时通讯),一种基于互联网的即时交流消息的业务 即时通讯(Instant Messaging)是目前Internet上最为流行的通讯方式,各种各样的即时通讯软件也层出 ...

  9. HttpUrlConnection使用详解--转AAAAA

    http://hc.apache.org/httpclient-3.x/apidocs/org/apache/commons/httpclient/HttpConnection.html HttpUr ...

  10. Java学习之继承关系内存分配

    假设有C继承B,B继承A; 继承会继承除private修饰的成员变量,方法.但不会继承构造器. 所以调用被继承下来的方法时,不需要指明主调者,但是调用构造器时,就需要指明主调者,那就是super.如果 ...