参考: 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. GetOpenFilename的基本用法(文件夹实操)

    Sub 数据导入()Dim f, arr, i&, j&, k, m%, n%, p%, sh As Workbookf = Application.GetOpenFilename(f ...

  2. Vultr IP被墙该怎么办

    我们创建好Vultr服务器时候,首先需要检测IP地址是否可用,很多IP在国内被墙,导致使用Xshell连接不上,虽然IP能够ping通,但是SSH依然连接不上.那Vultr IP被墙该怎么办呢? 方法 ...

  3. leetcode-210-课程表②

    题目描述: 第一次提交: class Solution: def findOrder(self, numCourses: int, prerequisites: List[List[int]]) -& ...

  4. 【JZOJ6346】ZYB和售货机

    description analysis 其实这个连出来的东西叫基环内向树 先考虑很多森林的情况,也就是树根连回自己 明显树根物品是可以被取完的,那么买树根的价钱要是儿子中价钱最小的那个 或者把那个叫 ...

  5. H5页面在手机上查看 使用手机浏览自己的web项目

    参考:http://www.browsersync.cn/#install 首先全局安装BrowserSync : npm install -g browser-sync 其次在项目文件夹下运行: b ...

  6. day 1 预习

    day1 显卡:全称是显示接口卡,又称显示适配器,是电脑进行数模信号转换设备,承担输出显示图形的任务,显卡接在电脑主板上它将电脑的数字信号转换成模拟信号,让显示器显示出来.同时显卡还有图像处理能力,可 ...

  7. 2018-8-10-win10-uwp-打开文件管理器选择文件

    title author date CreateTime categories win10 uwp 打开文件管理器选择文件 lindexi 2018-08-10 19:16:50 +0800 2018 ...

  8. 笔记:Python操作sql

    python操作mysql步骤: 创建connect连接 conn = connect(host='127.0.0.1', port=3306, user='root', password='1234 ...

  9. 3.pycharm spark配置

        pycharm 内的环境变量配置     选择相应的spark程序文件的对应的配置信息       PYSPARK_PYTHON:python的安装路径   PYTHONPATH:spark安 ...

  10. Spring_数据校验和自定义检验规则和分组校验

    @Validated  :绑定需要校验的数据. 数据校验规则:为数据绑定校验的规则 private Long booId;@NotNull(message = "不能为空")pri ...