美文网首页
vue 全局过滤器(单个和多个过滤器)

vue 全局过滤器(单个和多个过滤器)

作者: 前端召唤师 | 来源:发表于2019-04-26 11:42 被阅读0次

参考: 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) {
        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';
            }
        }
    },
    addZeroOne: function(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';
            }
        }
    }
}
export default dfilters;
  1. 在main.js中引入并注册(在new Vue前注册)
import dfilters from '../static/js/dfilters';

for (let key in dfilters) {
    Vue.filter(key, dfilters[key]);
}
  1. 在组件中使用
<span>原价:¥{{shopgoods.gprice|addZeroTwo}}</span>

相关文章

  • vue 全局过滤器(单个和多个过滤器)

    参考: https://www.cnblogs.com/liujn0829/p/8622960.htmlhttps...

  • vue filter 过滤器使用

    格式化时间 自定义全局过滤器 vue 自定义过滤器分为"全局过滤器"和"局部过滤器"两种。 一、 全局过滤器 全局...

  • vue自定义过滤器

    Vue的自定义过滤器有两种:全局过滤器和内部过滤器全局过滤器定义在vue实例化之前 内部过滤器注册在实例内部,仅在...

  • Vue2.0过滤器filter

    在单个组件内局部调用过滤器 全局过滤器在main.js中设置全局过滤器

  • Vue-04

    过滤器:对显示在页面上的数据进行筛选 全局过滤器 和Vue同级 Vue.filter(“过滤器名称”,func...

  • 王龙

    过滤器div: {{123.456|ab}} 1全局过滤器: Vue.filter('abc'...

  • 3 Vue filter过滤器、样式动态改变 class、sty

    1、filter过滤器 ->全局Vue.filter();局部filters:{}; ->可连着调用多个 2、Vu...

  • 2018-09-17 vue.js

    vue.js 全局过滤器 局部过滤器 计算属性 1.过滤器 : 让要显示在页面上的内容进行重新筛选 全局过...

  • Vue过滤器-filter

    过滤器,过滤东西呗.把一个值丢进过滤器,然后过滤器对此值进行过滤.返回过滤后的数据. Vue过滤器分全局过滤器和组...

  • 过滤器

    ...过滤器分为全局过滤器和局部过滤器全局过滤器的格式:html:{{数据,全局过滤器的名字}}//解析数据js:...

网友评论

      本文标题:vue 全局过滤器(单个和多个过滤器)

      本文链接:https://www.haomeiwen.com/subject/shdfnqtx.html