参考: 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. Linux 常用命令:开发调试篇

    前言 Linux常用命令中有一些命令可以在开发或调试过程中起到很好的帮助作用,有些可以帮助了解或优化我们的程序,有些可以帮我们定位疑难问题.本文将简单介绍一下这些命令. 示例程序 我们用一个小程序,来 ...

  2. 【转】40个Java多线程问题总结

    文章转自 五月的仓颉 http://www.cnblogs.com/xrq730/p/5060921.html 前言 Java多线程分类中写了21篇多线程的文章,21篇文章的内容很多,个人认为,学习, ...

  3. python库之mlxtend

    一.安装 conda install mlxtend --channel conda-forge 具体请看参考文献一 二.入门例子 请看参考文献2上github的举例 参考文献 http://rasb ...

  4. CSIC_716_20191107【深拷贝、文件的编码解码、文件的打开模式】

    深拷贝和浅拷贝 列表的拷贝,用copy方法浅拷贝,新列表和被拷贝列表的id是不一样的. list1 = [1, 'ss', (5, 6), ['p', 'w','M'], {'key1': 'valu ...

  5. python中的 += 语法的使用

    python中有个缩略的写法,如下 a = a +1 等同于 a +=1 发现了一个有趣之处,+=的写法中间不能有空格,否则报错,测试如下 Python 3.7.1 (v3.7.1:260ec2c36 ...

  6. 线段树逆序对(偏序)——cf1187D好题!

    /* 排除掉所有不可能的情况,剩下的就是可行的 1.数的数量不相同 2.对任意一个区间进行排序,等价于可以交换任意逆序对, 那么从1到n扫描b数组,判断是否可以将a数组中等于b[i]的值所在的位置j交 ...

  7. 图片压缩(js压缩,底部有vue压缩图片依赖使用的教程链接)

    directTurnIntoBase64(fileObj, callback) { var r = new FileReader(); // 转成base64 r.onload = function( ...

  8. 尚学linux课程---4、linux网络配置及linux文件

    尚学linux课程---4.linux网络配置及linux文件 一.总结 一句话总结: linux下的etc目录是配置文件的目录,所以很多的文件配置操作都可以看到它的身影:比如 init系列命名,比如 ...

  9. System.Collections.IDictionary.cs

    ylbtech-System.Collections.IDictionary.cs 1.程序集 mscorlib, Version=4.0.0.0, Culture=neutral, PublicKe ...

  10. Java笔记 – JDBC编程

    JDBC通过分层技术实现了跨数据库编程.为不同的数据库开发了统一的编程接口,为不同的数据库提供了不同的JAR类库. 一.JDBC基础 1.开发环境 (1)下载对应的Jar包 Oracle的本地Jar包 ...